미리 듣기 오디오 및 재생 중에 CSS 적용

소리 버튼을 만들려고합니다. 미리 듣기 오디오 및 재생 중에 CSS 적용

여기에 대답 사용해 본 적이 : Buttons click Sounds

및 버튼이 div의 그리고 MySQL의 DB에서 동적으로 생성되도록 그것을 구현했습니다.

누구든지 페이지로드시 해당 사운드 목록을 미리로드하는 방법을 알고 있습니까?

또한 CSS 클래스를 클릭하여 div에 적용한 다음 오디오가 끝나면 원래 CSS 클래스로 다시 전환하려고합니다.

이것은 내가 시도한 것입니다. 사운드는 올바르게 재생되지만 시작된 기능은 실행되지 않습니다. 당신이 HTML5 오디오를 사용하는 경우

<script type='text/javascript'> 
    $(window).load(function(){ 
    var baseUrl = "http://[URL HERE]"; 
    var audio = [<?php echo $audiostring; ?>]; 

    $('div.ci').click(function() { 
     var i = $(this).attr('id').substring(1); 
     mySound = new Audio(baseUrl + audio[i-1]).play();  
     mySound.onended = function() { 
     alert("The audio has ended");}; 

    }); 
    }); 

    </script>

출처

2016-08-31 Amit

다음과 같은 일을 할 수 있습니다

mySound.addEventListener("ended", function() 
{ 
     alert("The audio has ended"); 
});

편집 : here를 참조로

, 당신은 오디오 태그를 생성하는 방식을 변경하려고합니다.

$('div.ci').click(function() { 
    var i = $(this).attr('id').substring(1); 
    mySound = $(document.createElement('audio')); 
    mySound.src = baseUrl + audio[i-1]; 
    mySound.play();  
    mySound.addEventListener("ended", function() 
    { 
     alert("The audio has ended"); 
    }); 

});

출처

2016-08-31 03:46:27 mhatch

<audio> 및 new Audio()은 동일해야하지만, 연습의 경우와 같이이 을 보이지 않는다. 나는 자바 스크립트의 오디오 객체를 생성해야 할 때마다 나는 실제로 단지 다음과 같은 요소를 만듭니다

는 이벤트가 .currentTime의 특성을 기반으로 작성했다. event-media-ended

canplaythrough 이벤트는 브라우저가 오디오 파일을 다운로드가 완료 우리가 놀 수있을 때 알고에 사용 된

코드 전체 사용 closest

<style type="text/css"> 
    body{background: #aaa;color:#fff;} 
     div 
     { 
      width: 100px; 
      height: 100px; 
      background: #dda; 
     } 

    </style> 
</head> 
<body> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
<div > 

</div> 
<div > 

</div> 
<div > 

</div> 

<script type="text/javascript"> 

$(window).load(function(){ 

    var audioFiles = [ 
    "http://www.soundjay.com/button/beep-01a.mp3", 
    "http://www.soundjay.com/button/beep-02.mp3", 
    "http://www.soundjay.com/button/beep-03.mp3", 
    "http://www.soundjay.com/button/beep-05.mp3" 
]; 

function Preload(url) { 
    var audio = new Audio(); 
    // once this file loads, it will call loadedAudio() 
    // the file will be kept by the browser as cache 
    audio.addEventListener('canplaythrough', loadedAudio, false); 
    audio.src = url; 
} 

var loaded = 0; 
function loadedAudio() { 
    // this will be called every time an audio file is loaded 
    // we keep track of the loaded files vs the requested files 
    loaded++; 
    if (loaded == audioFiles.length){ 
     // all have loaded 
     init(); 
    } 
} 

var player = document.createElement('audio'); 
function playAudio(index) { 
    player.src = audioFiles[index]; 
    player.play(); 
} 

function init() { 
    $('div').click(function(event) { 
     $(this).css('background', 'blue'); 

     playAudio(Math.floor(Math.random()*audioFiles.length)); 
     player.addEventListener("ended", function(){ 
      player.currentTime = 0; 
      $(event.target).closest('div').css('background', '#dda'); 
     }); 

    }); 
} 

// We begin to upload files array 
for (var i in audioFiles) { 
    Preload(audioFiles[i]); 
} 


}); 
</script>

출처

2016-08-31 03:47:48

매우 완전한 답변 : – mhatch

여기 링크입니다 위의 대답에 대한 답변을 http://stackoverflow.com/a/21492698/4084574 – mhatch

나는 '이'요소를 사용하여 클릭 한 개별 div를 데리러 (왜냐하면 거기에 많은 페이지가 만들어집니다 DB에서 동적으로. 재생하기 전의 초기 변경 스타일에 대해서는 'this'선택기를 사용할 수 있지만 두 번째 변경은 이벤트 수신기의 함수에 있으므로이 함수에 'this'값을 전달하거나 어떻게 받아 들일 수 있습니까? 같은 요소? – Amit

미리 듣기 오디오 및 재생 중에 CSS 적용

답변

관련 문제