Question

我已经建立了一个网站来测试html5音频。不幸的是，有些浏览器不支持它。如何使用闪回后端？我还没有找到任何可用的东西。 Web上的Flash后端示例使用DOM元素，而不是新的Audio（）。我不想在这个小实验中使用JQuery。

我的代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Audio test</title>
<script type="text/javascript">

//testbegin
var audioTagSupport = !!(document.createElement('audio').canPlayType);

try {
    myAudio = new Audio(""); 
    audioObjSupport = !!(myAudio.canPlayType);
    basicAudioSupport = !!(!audioObjSupport ? myAudio.play : false);
} catch (e) {
    audioObjSupport = false;
    basicAudioSupport = false;
}

if (myAudio.canPlayType) {
    canPlayOgg = ("no" != myAudio.canPlayType("audio/ogg")) &&
 ("" != myAudio.canPlayType("audio/ogg"));

    canPlayMp3 = ("no" != myAudio.canPlayType("audio/mpeg")) &&
 ("" != myAudio.canPlayType("audio/mpeg"));
}
//testend


if(canPlayMp3) {
var audio = new Audio("http://www.w3schools.com/html5/song.mp3");
} else if(canPlayOgg) {
var audio = new Audio("http://www.w3schools.com/html5/song.ogg");
} else {
//flash...
}

audio.addEventListener('ended', function() { 
   document.getElementById('log').innerHTML+= 'ended<br/>';
}, false);

audio.addEventListener('canplay', function() {
   document.getElementById('ido').innerHTML = '0 / ' + Math.floor(audio.duration);
   document.getElementById('log').innerHTML+= 'can start<br/>';
}, false);

audio.addEventListener('canplaythrough', function() { 
   document.getElementById('log').innerHTML+= 'loaded<br/>';
}, false);

audio.addEventListener('timeupdate', function() { 
   document.getElementById('timme').innerHTML = Math.floor(audio.currentTime) + ' / ' + Math.floor(audio.duration);
   document.getElementById('buff').innerHTML = audio.buffered.end(audio.buffered.length-1);
}, false);

</script>
</head>
<body>
<a href="#" onclick="audio.play();">start</a><br/>
<a href="#" onclick="audio.pause();">pause</a><br/>
<a href="#" onclick="audio.volume=prompt('from 0 to 1',0.7)">volume</a><br/>
<a href="#" onclick="audio.currentTime = 3;">jump</a><br/>
<a href="#" onclick="audio.playbackRate=prompt('from 0 to 1',0.7)">speed</a><br/>
<p id="timme">?/?</p>
<p id="buff">?</p>
<div id="log">...<br/></div>
</body>
</html>

提前致谢

Answer 1

MediaElement.js实现了HTML5媒体元素API，只需进行初始化所需的一些小改动。您只需使用new MediaElement(document.createElementNS("http://www.w3.org/1999/xhtml", "audio"))代替new Audio。

此外，您不应该使用这样的代码：

if(canPlayMp3) {
var audio = new Audio("http://www.w3schools.com/html5/song.mp3");
} else if(canPlayOgg) {
var audio = new Audio("http://www.w3schools.com/html5/song.ogg");
} else {
//flash...
}

只需在<source>个元素中使用<audio>个元素。

var
  audio = new Audio
, mp3 = audio.appendChild(document.createElementNS(audio.namespaceURI, "source"))
, ogg = audio.appendChild(mp3.cloneNode())
;

mp3.type = "audio/mpeg";
mp3.src = "http://www.w3schools.com/html5/song.mp3";

ogg.type = "audio/ogg;codecs='vorbis'";
ogg.src = "http://www.w3schools.com/html5/song.mp3";

Answer 2

如果我理解你的问题是正确的，那么HTML5 spec会让你这么简单。它声明：

某些嵌入式内容元素可能具有后备内容：无法使用外部资源时要使用的内容（例如，因为它的格式不受支持）。

您无需对浏览器支持进行详细测试。只需在您的网页中加入html5shim，Modernizr或其他等效内容（或自行创建audio元素），这样audio元素就不存在于浏览器中支持它。然后包括你的音频：

<audio>

    <source src="Path/To/File.mp3" type="audio/mpeg" />
    <source src="Path/To/File.ogg" type="audio/ogg" />

    <object>
        <!-- Flash player here -->
    </object>

</audio>

没有audio支持的旧浏览器将忽略source元素，而是使用包含Flash播放器的object元素。

现代浏览器将播放他们看到的第一个兼容的source文件，并会忽略object元素。

很抱歉，如果我误解了这个问题。通过“flash后端”，我认为你的意思是“Flash备份”，就像在后备Flash播放器中一样，以防本机audio不受支持。

Answer 3

您可能希望了解如何使用jplayer。它是一个jQuery插件，可以使用flash后备处理html5中的音频和视频

如何使用flash后端获取新的Audio（）？

3 个答案: