Safari/IE 브라우저에서 webm 대신 mp3를 재생하기 위해 HTML5 또는 Javascript에서 브라우저 유형을 감지하는 방법은 무엇입니까?

Question

저는 Qualtrics에서 webm audios를 사용하는 설문 조사를 만들었습니다. Safari webm에서는 재생되지 않으며 IE의 경우 사용자는 this Google 플러그인을 설치해야합니다. 선호하는 HTML (5) 또는 브라우저의 유형을 감지 할 수있는 자바 스크립트가 있는지 궁금 해서요. 사파리 또는 IE의 경우 mp3 버전의 오디오를 재생합니다 (우리는 서버에서도 마찬가지입니다). 또한 다양한 브라우저에서 오디오를 재생할 때 발생하는 문제를 해결하기위한보다 나은 해결책이 있는지 알려 주시기 바랍니다.

The second auditory story is titled, “The Most Precious Possession.” Press the “Play Story” button to begin listening to the story; after you have finished listening to the story, you will answer a set of questions about the story. 
<div> 
<audio controls="" id="audio3" style="display:none"><source src="http://langcomplab.net/Most_Precious_Possession_Master.webm" style="width:50%" type="audio/webm" />Your browser doesn&#39;t support this audio format.</audio> 
</div> 

<p>&nbsp;</p> 

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

여기 Qualtrics의 자바 스크립트가있어서 많이 바꿀 수 없다는 것을 의미합니다.

Qualtrics.SurveyEngine.addOnload(function() 
{ 
    /*Place Your Javascript Below This Line*/ 
    var aud = document.getElementById('audio3'); 
    this.questionclick = function(event,element){ 
     if((element.type == "button") && (element.name == "play")) 
     { 
      aud.play(); 
     } 
    } 


}); 

Answer 1

mp3 및 webm 소스를 모두 제공하고 유형 속성을 올바르게 설정하면 브라우저가 지원하는 유형을 선택할 수 있습니다. mp3 파일 만 추가하면됩니다. 일부 구형 사파리 브라우저는 첫 번째 사파리 브라우저 (mp3 지원)를 사용하기 때문에 mp3를 먼저 넣을 것이지만 그렇지 않은 경우 브라우저는 유형에 따라 지원할 수있는 첫 번째 사파리를 선택합니다.

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

오디오 및 비디오에 모두 적용되는 MDN에 대한 추가 정보를 참조하십시오.

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video