javascript - 如何检测 HTML5 或 Javascript 中的浏览器类型以便在 Safari/IE 浏览器中播放 mp3 而不是 webm？

Question

我在 Qualtrics 中创建了一项调查，其中我播放 webm 音频。然而，在 Safari 中 webm 无法运行，对于 IE，用户需要安装 this谷歌插件。我想知道是否有最好的 HTML(5) 甚至 javascript 代码可以检测浏览器的类型，如果是 Safari 或 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 中的 javascript，这意味着我无法对其进行太多更改。

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 源并且正确设置了 type 属性，则浏览器可以选择它支持的源。所以只需添加 mp3 即可。我会把 mp3 放在第一位，因为一些旧的 Safari 浏览器只使用第一个(并且它们支持 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