HTML5 - 오디오 재생

누군가 내게 조종사를 줄 수 있는지 궁금합니다. 내 마음이 공백입니다. 내 페이지에는 3 가지 다른 사운드 (자바 스크립트 사용)를위한 3 개의 버튼이 있습니다. 내가하려는 것은이 세 개의 버튼을 누른 다음 선택한 사운드를 재생하는 버튼입니다. 다시 클릭하면 멈 춥니 다.HTML5 - 오디오 재생

플래시로 할 수는 있지만 HTML5에서는 조금 어색합니다.

업데이트

안녕 얘들 아 - 응답에 대한 감사 이것이 내가 지금까지 사용하고 있습니다 것입니다 .. : 버튼이 선택하도록

<div data-role="controlgroup" data-type="horizontal"> 
    <audio loop id="8000"> 
     <source src="8000.mp3"> 
    </audio> 
    <button onclick="document.getElementById('8000').play()">16kHz</button> 
    <audio loop id="18000"> 
     <source src="18000.mp3"> 
    </audio> 
    <button onclick="document.getElementById('18000').play()">18kHz</button> 
    <audio loop id="20000"> 
     <source src="20000.mp3"> 
    </audio> 
    <button onclick="document.getElementById('18000').play()">20kHz</button> 
</div> 
<div data-role="controlgroup" data-type="horizontal"> 
    <button class="ui-body-b" onclick="document.getElementById('8000').pause(); document.getElementById('8000').currentTime = 0;" >Stop Playing</button>

이 지점으로 작동하지만 내가 원하는 재생할 사운드 (실제로는 재생하지 않음)가 큰 재생 사운드 버튼을 가지고 있습니다 ...

출처

2012-01-23 Jimbly2

Google이 있습니까? 'html5 오디오'의 첫 번째 결과는 아마도 다음과 같습니다. http://www.w3schools.com/html5/html5_audio.asp – Josh

논리는 Flash와 거의 동일합니다. 유일한 차이점은 사용하는 API이며 [명세서] (http://w3.org/TR/html5/)에 자세히 설명되어 있습니다. 어떤 특정 문제가 있습니까? – Quentin

http://jplayer.org/ HTML5/CSS/JQuery와 HTML5 오디오 태그가 완전하게 작동하지 않는 브라우저 (예 : 플래시)를 사용합니다. 정확히 무엇을 찾고 있니? "commands"속성이있는 HTML5 오디오 태그처럼 간단 할 수도 있지만 크로스 브라우저에서는 작동하지 않습니다. –

내게는 오디오와 관련이 없지만 효과를 얻기 위해 버튼을 구현하는 방법이 나와 있습니다. 필요. 게시 한 코드가 작동한다고 말하면 재생 및 일시 중지가 오디오 요소에서 올바르게 작동하고 있습니다. 그러나 3 개의 버튼은 3 개의 다른 사운드를 시작하고 마지막 버튼은 현재 재생중인 모든 사운드를 정지시키는 반면, 3 개의 버튼 중 하나를 사용하여 사운드를 선택하고 마지막 버튼을 사용하여 선택한 것을 재생/일시 정지하려고합니다.

당신은 사운드 버튼을 선택합니다 마지막으로 클릭의 ID를 저장하는 변수가있는 경우, 다음 ... 플레이() 및 일시 정지()를 호출 사이에 여기

<!DOCTYPE html> 
<html> 
<header> 
<script type="text/javascript"> 
    var selSound = 8000; //default to first sound. 
    var play = false; //default to paused. 

    function selectSound(id) { 
     selSound = id; 
    } 

    function togglePlay() { 
     var a = document.getElementById(selSound); 
     var b = document.getElementById("playbtn"); 
     play = !play; 
     if (play) { 
      b.value = "Stop Playing"; 
      a.play(); 
     } 
     else { 
      b.value = "Start Playing"; 
      a.pause(); 
     } 
    } 
</script> 
</header> 
<body> 
    <div data-role="controlgroup" data-type="horizontal"> 
     <audio loop id="8000"> 
      <source src="8000.mp3"> 
     </audio> 
     <button onclick="selectSound('8000')">16kHz</button> 
     <audio loop id="18000"> 
      <source src="18000.mp3"> 
     </audio> 
     <button onclick="selectSound('18000')">18kHz</button> 
     <audio loop id="20000"> 
      <source src="20000.mp3"> 
     </audio> 
     <button onclick="selectSound('18000')">20kHz</button> 
    </div> 
    <div data-role="controlgroup" data-type="horizontal"> 
      <button id="playbtn" class="ui-body-b" onclick="togglePlay()" >Start Playing</button> 
    </div> 
</body> 
</html>

첫 번째 전환 마지막 버튼을 사용하여 3 버튼은 단순히 변수 selSound를 '8000', '18000'또는 '20000'으로 설정 한 다음 마지막 버튼을 눌러 사운드를 재생하면 selsound 변수가 사용할 오디오 요소의 ID를 식별하는 데 사용됩니다. 첫 번째 클릭부터 시작하여 소리가 나고 다음 클릭으로 멈추게되며 계속해서 앞뒤로 전환됩니다.

아직 완전히 테스트되지 않았으므로 완전히 테스트되지 않았습니다. 그러나 사운드 재생이 끝나면 재생/일시 정지 단추가 '재생 시작'으로 다시 전환되기를 원할 것입니다. 그렇지 않으면 재생을 클릭하고 선택한 사운드가 재생되고 마지막으로 중지되지만 버튼에 계속 '재생 중지'가 표시되면 클릭하면 '재생 시작'이라고 말한 다음 토글하여 클릭해야합니다 다시 샘플 재생을 시작합니다. 따라서 사운드가 멈추고 버튼을 '시작하기'로 다시 전환 할 때 이벤트를 잡아두기를 원할 것입니다.

HTH

출처

2012-02-06 18:03:39

안녕 데이비드 - 이걸 보느라 시간을내어 주셔서 고마워 -이게 내가 정확히 달성하려고하는 것 같아. 나는 '연주 시작'으로 되돌아가는 것에 대해 당신의 요점을 생각해냅니다. 그러나 소리는 반복 될 것이므로 실제로 멈추지 않을 것입니다. 버튼에 대한 이미지도 사용 하겠지만 간단해야합니다! 다시 한 번 감사드립니다 - 짐 – Jimbly2

안녕하세요 - 위와 같이 - 'playbtn'을 켜고 끌 수 없습니까? – Jimbly2

'재생 시작'/ 오디오 파일 일시 중지와 '재생 중지'/ 버튼을 클릭했을 때 오디오 파일 재생 사이를 전환하지 않는다는 뜻입니까? Javascript 오류가 발생하고 있습니까? –

HTML5 - 오디오 재생

답변

관련 문제