왜 오디오가 때때로 같은 브라우저에서 재생되지 않는가?

다음 코드가 있는데 무엇이 잘못되었는지 잘 모릅니다. 오디오 파일이있는 원격 호스트에 문제가 있습니까? Chrome에서 가끔은 재생되며 때때로 재생되지 않으며 재생되지 않을 때 브라우저가 오디오 형식을 지원하지 않는다고하지 않습니다.왜 오디오가 때때로 같은 브라우저에서 재생되지 않는가?

<audio controls id="audio" style="display:none"> 
    <source src="http://langcomplab.net/Honey_Gatherers_Master.mp3" type="audio/mpeg" /> 
    Your browser doesn't support this audio format. 
</audio> 
<button id="button">Play</button> 
<script type="text/javascript"> 

     // run on page load 
    var button = document.getElementById('button'); 
    var audio = document.getElementById('audio'); 

    var onClick = function() { 
     audio.play(); // audio will load and then play 
    }; 

    button.addEventListener('click', onClick, false); 
</script>

http://jsfiddle.net/MfU7h/

업데이트 : 정말 이상해. 소스 섹션에서 나는

</html> tag for a block in Qualtrics but when I source my code using rich context editor the tags fade away. Any solution to this? 
<html> 
<body onload='Qualtrics.SurveyEngine.addOnload'> 
<p>The next two stories will be the two stories presented auditorily. Please press the &ldquo;Play Story&rdquo; button now to hear an example auditory story. Be sure to adjust the volume of the device on which you are listening so that you can hear the auditory story clearly.</p> 

<p>&nbsp;</p> 

<div> 
<audio controls="" id="audio1" style="display:none"><source src="http://langcomplab.net/Test_take2.mp3" style="width:50%" type="audio/mpeg" />Your browser doesn&#39;t support this audio format.</audio> 
</div> 

<div><button name="play" onclick="disabled=true" style="height:25px; width:200px" type="button">Play Story</button> 

<p>&nbsp;</p> 
</div> 
</body> 
</html>

enter image description here

P.S를 추가 : 내가 onload 섹션에서 적절한 기능을 사용하고 있습니까?

출처

2014-06-09 Mona Jalal

나는 그것을 상쾌하게하고 있지만 크롬에 문제가있는 것 같지 않다. – vico

나는 무엇이 문제의 원인인지 정말로 모른다. 1 시간 전에 나에게 일하지 않고 지금 일하고있다. 문제를 다시 발생시키는 법을 모르겠습니다. –

내 iPad에서 버튼이 작동하지 않습니다 (오디오 파일이 매우 느리게로드되어 0시에 멈춤) Ps :'display : none'이 iOS에서 작동하지 않습니다 –

페이지로드 후 코드를 실행해야하는 것처럼 보입니다. 예 : 오디오 태그 앞에 실행할 수있는 자바 스크립트가 완전히 페이지에로드 된 -

<body onload='loadAudio'> 

<audio controls id="audio" style="display:none"> 
    <source src="http://langcomplab.net/Honey_Gatherers_Master.mp3" type="audio/mpeg" /> 
    Your browser doesn't support this audio format. 
</audio> 
<button id="button">Play</button> 

<script type="text/javascript"> 

function loadAudio() { 
    var button = document.getElementById('button'); 
    var audio = document.getElementById('audio'); 

    var onClick = function() { 
     audio.play(); // audio will load and then play 
    }; 

    button.addEventListener('click', onClick, false); 
} 
</script> 
</body>

나는 현재이 얼마나 빨리 DOM로드에 의존하기 때문에 코드가 가끔이 아니라 다른 사람을 작동하는 이유라고 생각합니다 (업데이트).

출처

2014-06-09 20:06:38 mdsomerfield

DOM로드 속도뿐만 아니라 사운드 효과가 얼마나 빨리로드되는지에 따라 달라집니다. play()가 호출 될 때까지 MP3가로드되면 재생할 수 있지만 아직로드되지 않은 사운드 효과는 재생할 수 없습니다. 그러나 당신의 솔루션은 작동합니다. 재생하기 전에 사운드 효과가로드 될 때까지 기다리십시오. – tomysshadow

감사합니다. 나는 그것을 지금 시도 할 것이다! –

@mdsomerfield 업데이트 된 질문을 살펴볼 수 있습니까? Qualtrics (설문 조사를 작성하는 곳)에서 해결책을 시도했지만 작동하지 않았습니다. –

왜 오디오가 때때로 같은 브라우저에서 재생되지 않는가?

답변

관련 문제