如何检测浏览器类型在HTML5或Javascript播放MP3，而不是WEBM在Safari / IE浏览器？ [英] How to detect browser type in HTML5 or Javascript for playing mp3 instead of webm in Safari/IE browsers?

问题描述

我创建了一个调查Qualtrics其中我玩WEBM音频。然而，在Safari浏览器WEBM不玩了，并为IE用户需要安装这的谷歌插件。我在想，如果没有在preferably HTML一个code（5），甚至的JavaScript可以检测浏览器的类型，如果它的Safari或者IE浏览器，然后播放音频的MP3版本（我们对服务器以及）。也请让我知道，如果有比这更好的解决方案，解决在各种浏览器中播放音频的问题。

 第二听觉故事的标题是，＆安培; ldquo;最precious藏与放; rdquo;的preSS的＆放大器; ldquo;游戏的故事和放大器; rdquo;的按钮开始听故事;你听完这个故事后，你会回答一系列关于故事的问题。
＆LT; D​​IV＆GT;
＆LT;音响控制=ID =音频3的风格=显示：无＆GT;＆lt;信源SRC =htt​​p://langcomplab.net/Most_$p$pcious_Possession_Master.webm的风格=宽度：50％ TYPE =音频/ WEBM/＆GT;你的浏览器不安培;＃39;吨支持这种音频格式＆LT; /音频＆GT;
＆LT; / DIV＆GT;＆所述p为H.;＆放大器; NBSP;＆下; / P＆GT;＆LT; D​​IV＆GT;＆LT;按钮名称=玩的onclick =禁用=真的风格=高度：25px的;宽度：200像素类型=按钮＆GT;播放故事＆LT; /按钮＆GT;＆LT; / DIV＆GT;
 

下面是Qualtrics的JavaScript，这意味着我不能改变它了。

  Qualtrics.SurveyEngine.addOnload（函数（）
{
    / *将你的JavaScript下面这行* /
    VAR AUD =的document.getElementById（'音频3'）;
    this.questionclick =功能（事件，元素）{
        如果（（element.type ==按钮）及及（element.name ==玩））
        {
            aud.play（）;
        }
    }
}）;
 

解决方案

如果您同时提供一个MP3和WebM来源和正确设置类型属性，浏览器可以选择它支持一个。所以刚才添加的MP3之一。我把mp3的一个第一，因为一些老的浏览器Safari浏览器只使用第一个（和他们支持MP3），但在其他浏览器将选择它们可以支持基于类型的第一个。

 ＆LT;音响控制=ID =音频3的风格=显示：无＆GT;
    ＆lt;信源SRC =htt​​p://langcomplab.net/Most_$p$pcious_Possession_Master.mp3
       风格=WIDTH：50％TYPE =音频/ MP3/＆GT;
    ＆lt;信源SRC =htt​​p://langcomplab.net/Most_$p$pcious_Possession_Master.webm
       风格=WIDTH：50％TYPE =音频/ WEBM/＆GT;
    你的浏览器不安培;＃39;吨支持此音频格式。
＆LT; /音频＆GT;
 

查看MDN适用于音频和视频的更多信息。

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

I have created a survey in Qualtrics wherein I play webm audios. However in Safari webm doesn't play and for IE the user needs to install this Google plugin. I was wondering if there is a code in preferably HTML(5) or even javascript which can detect type of the browser and if it's Safari or IE then play the mp3 version of the audio(which we have on the server as well). Also please let me know if there are better solutions than this for tackling the problem of playing audio in various browsers.

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>

Here's the javascript in Qualtrics which means I cannot change it much.

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();
        }
    }


});

解决方案

If you provide both an mp3 and webm sources and you set the type attribute properly, the browser can select the one it supports. So just add the mp3 one. I would put the mp3 one first since some old Safari browsers only use the first one (and they supported mp3), but otherwise the browsers will select the first one they can support based on the type.

<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>

See additional information on MDN which applies to both audio and video.

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

这篇关于如何检测浏览器类型在HTML5或Javascript播放MP3，而不是WEBM在Safari / IE浏览器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！