我正在尝试在Opera 12.16(现在是最新版本)和I noticed it doesn't work with mp3
files中播放audio
元素,但它与ogg
个元素一起播放。
这是我的小提琴目前只有mp3文件,而不是在Opera上工作: http://jsfiddle.net/hMnsd/1/
解决方案似乎做了类似的事情(如w3c website中指出的那样):
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
我现在正在使用此功能来生成声音:
function notificationSound(){
var audioElement = document.createElement('audio');
audioElement.setAttribute('src', "http://"+ document.domain +"/files/notification2.mp3");
audioElement.setAttribute('type', 'audio/mpeg');
audioElement.setAttribute('autoplay', 'autoplay');
//audioElement.load()
audioElement.addEventListener("load", function() {
audioElement.play();
}, true);
}
为了添加ogg
文件,我试图生成所需的结构但没有成功:
var audioElement = document.createElement('audio');
var audioSource1 = document.createElement('source');
var audioSource2 = document.createElement('source');
//mp3 file
audioSource1.setAttribute('src', "http://"+ document.domain +"/files/notification2.mp3");
audioSource1.setAttribute('type', 'audio/mpeg');
//ogg file
audioSource2.setAttribute('src', "http://"+ document.domain +"/files/notification2.ogg");
audioSource2.setAttribute('type', 'audio/ogg');
audioElement.setAttribute('autoplay', 'autoplay');
audioElement.append(audioSource2); //opera
audioElement.append(audioSource1);
//audioElement.load()
$.get();
audioElement.addEventListener("load", function() {
audioElement.get(0).play();
}, true);
如何通过ogg
文件在Opera中实现它?
答案 0 :(得分:1)
我会检查用户使用的浏览器,然后选择来源。
var audioElement = document.createElement('audio');
if (navigator.userAgent.search("MSIE") >= 0) {
audioSource1.setAttribute('src', "http://" + document.domain + "/files/notification2.mp3");
audioSource1.setAttribute('type', 'audio/mpeg');
} else if (navigator.userAgent.search("Chrome") >= 0) {
audioSource2.setAttribute('src', "http://" + document.domain + "/files/notification2.ogg");
audioSource2.setAttribute('type', 'audio/ogg');
} else if (navigator.userAgent.search("Firefox") >= 0) {
audioSource2.setAttribute('src', "http://" + document.domain + "/files/notification2.ogg");
audioSource2.setAttribute('type', 'audio/ogg');
} else if (navigator.userAgent.search("Safari") >= 0 && navigator.userAgent.search("Chrome") < 0) {
audioSource1.setAttribute('src', "http://" + document.domain + "/files/notification2.mp3");
audioSource1.setAttribute('type', 'audio/mpeg');
} else if (navigator.userAgent.search("Opera") >= 0) {
audioSource2.setAttribute('src', "http://" + document.domain + "/files/notification2.ogg");
audioSource2.setAttribute('type', 'audio/ogg');
}
audioElement.setAttribute('autoplay', 'autoplay');
audioElement.addEventListener("load", function () {
audioElement.play();
}, true);
我希望我能正确理解你的问题。
答案 1 :(得分:1)
使用特征检测而不是浏览器检测:
function isMpeg()
{
var a = document.createElement('audio');
return !!(a.canPlayType && a.canPlayType('audio/mpeg;').replace(/no/, ''));
}
function isOgg()
{
var a = document.createElement('audio');
return !!(a.canPlayType && a.canPlayType('audio/ogg; codecs="vorbis"').replace(/no/, ''));
}
function isAAC()
{
var a = document.createElement('audio');
return !!(a.canPlayType && a.canPlayType('audio/mp4; codecs="mp4a.40.2"').replace(/no/, ''));
}
alert(isMpeg());
alert(isOgg());
alert(isAAC());
示例:http://jsfiddle.net/Cy9AT/1/
另见:http://diveintohtml5.info/everything.html
或使用Modernizer