将音频添加到网页的主要方法是使用音频元素。与许多新的HTML5支持一样，音频元素使您能够使用错误消息或另一种回放技术返回，如果用户的浏览器不支持HTML5音频元素，就像旧浏览器的情况一样。您可以在音频标记之间放置一条错误消息，如下面的例子所示，或者为外部播放器控件插入代码，比如Silverlight浏览器插件。下面的代码示例展示了一个播放音频文件的简单网页。
<!DOCTYPE HTML>
<html>
<head>
<title>Audio Element Sample</title>
<!-- Uncomment the following meta tag if you have issues rendering this page on an intranet site. -->
<!-- <meta http-equiv="X-UA-Compatible" content="IE=9" /> -->
</head>
<body>
<h1>Audio Element Sample</h1>
<!-- Display the audio player with control buttons. -->
<audio src="demo.mp3" controls autoplay loop>
HTML5 audio not supported
</audio>
</body>
</html>
音频元素被直接添加到您的HTML代码中，使用src属性指定要播放的音频文件，以及控制属性，以便使用内置的播放器控件。如果您使用浏览器的内在播放器，则不需要额外的脚本。在不同的浏览器之间，内在的播放器可能会有不同的风格或功能。
在Internet Explorer 9中，音频元素显示一个简单的播放器，它具有基本的播放、暂停、位置滑块和音量控制。玩家还可以显示播放时间，以及文件中剩余的时间。如果你在任何时间显示上停留，你可以在30秒前跳过或后退。
Internet Explorer 9中的音频元素支持另外两个属性，自动播放和循环。自动播放告诉Windows Internet Explorer在加载音频对象后立即加载并播放音频文件。这类似于使用bgsound HTML元素。与bgsound不同的是，暂停和播放控制让网页用户关闭声音。loop属性从一开始就不断地重新播放声音文件。如果您不需要任何内在控件，则不要使用属性。
在这个例子中，文件“demo.mps“是你自己文件的占位符。如果音频文件存在于与网页源代码相同的目录中，那么您只需指定文件名即可。如果音频文件在另一个目录中，例如“music\demo.mp3”这样的路径。如果文件在另一个站点上，则使用完全限定的域和路径，如“http:\www.contoso.com\music\demo.mp 3”。
虽然音频元素可以单独使用，但使用脚本可以通过使用自己的按钮、创建播放列表或在回放中添加状态来增强你的网页。有关脚本音频元素的更多信息，请参阅使用JavaScript来控制音频对象。
注意，如果你在内部网中开发，并且有HTML5的渲染问题，你可以添加
在JavaScript中播放和暂停音频回放
在开始使用HTML5音频元素时，HTML5音频元素可以让你在不使用外部控制或程序的情况下将音频添加到网页中。但是，除非你在你的网页上只需要一个简单的音频播放器，否则你可能会想要更多地控制你加载的音频文件和回放。要使用带有JavaScript的音频元素，用“ID”定义一个音频标签，并可选地把其他所有东西都排除在外。正如在开始使用HTML5音频元素时所讨论的，您可以显示或隐藏内置控件，或者在页面加载时自动设置音频。您仍然可以这样做，并使用JavaScript进一步深入。
在下面的例子中，我们使用HTML中的简单音频标记语法。
注意，如果你在内部网中开发，并且有HTML5的渲染问题，你可以添加
例1：
<input type="text" id="audiofile" size="80" value="demo.mp3" />
var currentFile = "";
function playAudio() {
// 检查音频元素支持。
if (window.HTMLAudioElement) {
try {
var oAudio = document.getElementById('myaudio');
var btn = document.getElementById('play');
var audioURL = document.getElementById('audiofile');
//如果当前文件没有更改，则跳过加载。
if (audioURL.value !== currentFile) {
oAudio.src = audioURL.value;
currentFile = audioURL.value;
}
// 测试暂停属性并设置状态。
if (oAudio.paused) {
oAudio.play();
btn.textContent = "Pause";
}
else {
oAudio.pause();
btn.textContent = "Play";
}
}
catch (e) {
// 静默失败，但在F12开发工具控制台中显示
if (window.console && console.error("Error:" + e));
}
}
}
在本例的HTML部分中，音频元素被分配id=“myaudio”，以及一个源文件“demo.mp3”。按钮的定义是id=“play”，以及触发“playAudio（）”JavaScript函数的onclick事件。
在JavaScript部分，音频对象是使用document.getElementById返回的。play和pause方法用于提供回放控制。按钮对象被检索，这样按钮标签就可以在播放和暂停之间进行操作，这取决于音频对象的暂停属性的状态。每次调用“playAudio”函数时，都会检查状态。如果音频文件正在播放，暂停的属性返回false，暂停方法将暂停回放。按钮标签也被设置为播放。
如果文件被暂停，暂停的属性返回true，并且调用play方法，按钮标签将被更新为暂停。当一个文件第一次被加载时，暂停的属性返回true（回放被暂停），即使暂停方法没有被明确地调用。
在HTML代码中，按钮在默认情况下是禁用的。当页面加载时，函数checkSupport（）将使用body tag中的onload事件来调用。如果音频元素存在，则启用按钮。
例2：
在第一个例子中，音频源文件是通过在项目的HTML部分中使用源标记来指定的。要玩的不仅仅是一个文件，你可以将音频对象的src属性设置为来自JavaScript的音频文件的URL。
在下一个例子中，在HTML部分中添加了一个文本输入元素，您可以在其中粘贴MPEG-Layer 3（MP3）音频文件的路径。
与第一个例子不同的是，单击Play按钮可能意味着用户已经更改了音频文件，或者他们已经暂停了当前文件。因为在更改音频文件源时调用src方法会重置暂停状态，所以“playAudio”函数必须指示用户何时想要更改文件。定义了全局变量“currentFile”，以便跟踪当前正在播放的文件的URL。当用户单击Play按钮时，“currentFile”变量将与“audioURL.value”指定的文本字段中的值进行比较。如果这些值是不同的，src属性被设置为新的文件URL，则更新“currentFile”变量，并调用load方法。
在这个例子中，“currentFile”变量跟踪文本字段的内容，而不是音频对象的src属性。这样做的原因是src属性始终是文件的完全限定路径，这可能与文本字段中的内容不匹配。例如，如果音频文件存在于与网页源代码相同的目录中，您可以只指定文件名。如果音频文件位于同一域中的另一个目录中，则包括“music demo.mp3”这样的路径。如果文件在另一个站点上，请使用完全限定的域名和文件路径，如“http:\www.contoso.com\music\demo.mp3”。
当一个音频文件正在播放时，currentTime属性会跟踪音频片段中回放的位置。通过改变currentTime的值，您可以跳过向前或向后，或者重新启动回放。这个例子包括三个新的按钮，它们调用rewindAudio、forwardAudio和restartAudio函数。rewindAudio和forwardAudio功能减少或增加currentTime的值30秒。您可以改变增量值以创建更大或更小的跳跃。在restartAudio函数中，currentTime的值被设置为零，这是文件的开始。
您还可以通过调整playbackRate属性来改变音频播放的速度。playbackRate属性是回放速度的倍倍。playbackRate的值必须是正的，因为负的值会导致错误。
音频对象还支持诸如timeUpdate事件之类的事件，它可以用来跟踪文件的进度。
// 将音频文件回放30秒。
function rewindAudio() {
// 检查音频元素支持。
if (window.HTMLAudioElement) {
try {
var oAudio = document.getElementById('myaudio');
oAudio.currentTime -= 30.0;
}
catch (e) {
// 静默失败，但在F12开发工具控制台中显示
if (window.console && console.error("Error:" + e));
}
}
}
// 快进音频文件30秒。
function forwardAudio() {
// 检查音频元素支持。
if (window.HTMLAudioElement) {
try {
var oAudio = document.getElementById('myaudio');
oAudio.currentTime += 30.0;
}
catch (e) {
// 静默失败，但在F12开发工具控制台中显示
if (window.console && console.error("Error:" + e));
}
}
}
// 重新启动音频文件到开始。
function restartAudio() {
// 检查音频元素支持。
if (window.HTMLAudioElement) {
try {
var oAudio = document.getElementById('myaudio');
oAudio.currentTime = 0;
}
catch (e) {
// 静默失败，但在F12开发工具控制台中显示
if (window.console && console.error("Error:" + e));
}
}
例3 ：
您还可以通过调整playbackRate属性来改变音频播放的速度。playbackRate属性是回放速度的2倍。playbackRate的值必须是正的，因为负的值会导致错误。这个例子播放一个音频文件，让你加速它或者减慢它的速度。增加速度按钮，它从正常开始，每点击一次，增加1倍的播放速率。减速按钮，每点击一次按钮，播放速率减半。这些跳转目的是增强显示效果，但是您可以选择使用更小的增量。
<!DOCTYPE html>
<html>
<head>
<title>Audio playbackRate Example</title>
</head>
<body>
<div>
<audio id="audio1" style="width:25%" controls>Canvas not supported</audio>
</div>
<div>
<input type="text" id="audioFile" value="audio.mp3" size="60" />
</div>
<button id="playbutton" onclick="togglePlay();">Play</button>
<button onclick="increaseSpeed();">Increase speed</button>
<button onclick="decreaseSpeed();">Decrease speed</button><br />
<div id="rate"></div>
<script type="text/javascript">
// 创建几个要使用的全局变量。
var audioElm = document.getElementById("audio1"); // 单频元素
var ratedisplay = document.getElementById("rate"); // 倍速显示
// 盯住ratechange事件，在每次更改之后，显示当前的playbackRate
audioElm.addEventListener("ratechange", function () {
ratedisplay.innerHTML = "Rate: " + audioElm.playbackRate;
}, false);
// 根据暂停属性的值在播放和暂停之间进行交替
function togglePlay() {
if (document.getElementById("audio1")) {
if (audioElm.paused == true) {
playAudio(audioElm); // 如果播放器是暂停的，就播放文件
} else {
pauseAudio(audioElm); // 如果播放器在播放，就暂停
}
}
}
function playAudio(audioElm) {
document.getElementById("playbutton").innerHTML = "Pause"; // 设置按扭文本为Pause
// 从文本框中获得文本，并将它分配给音频元素成为元素的资源文件
audioElm.src = document.getElementById('audioFile').value;
audioElm.play();
}
function pauseAudio(audioElm) {
document.getElementById("playbutton").innerHTML = "play"; // 设置按扭文本为play
audioElm.pause();
}
// 增加播放倍速1倍
function increaseSpeed() {
audioElm.playbackRate += 1;
}
// 减慢播放速率一半
function decreaseSpeed() {
if (audioElm.playbackRate <= 1) {
var temp = audioElm.playbackRate;
audioElm.playbackRate = (temp / 2);
} else {
audioElm.playbackRate -= 1;
}
}
</script>
</body>
</html>
例4：
编写没有错误的代码是很困难的。这个例子包含了一些可能帮助您避免犯错误的建议。
注意，这里的示例包括将错误发送到F12开发工具控制台或脚本选项卡的代码。
HTML语言的一个特点是，如果一个标签没有被识别，它就会被忽略。在不支持HTML5的浏览器中，当您使用HTML5音频元素时，如果它没有被识别，则使用标记之间的部分。在这个例子中，不支持HTML5音频的消息，但是您可以添加任何消息，使用另一种技术，比如Microsoft Silverlight，或者允许用户下载该文件。如果支持HTML5音频，那么标签之间的部分将被忽略。然而，有一点需要注意。对于普通的浏览器查看，音频标签之间的内容被忽略了，但是如果用户使用屏幕阅读器浏览网页，那么标签之间的内容也会被读者阅读。
在代码的JavaScript部分，有可能出现错误的地方。第一个是当你检查HTML5音频支持的时候。每个函数都使用if (window.HTMLAudioElement)来查看音频元素是否存在。如果音频元素不存在，就不会执行任何代码。
在这个例子中，如果不存在支持，按钮将被禁用，因此不会调用函数。然而，禁用对JavaScript函数的访问可能在您的web页面中是不实际的。
如果支持HTML5音频，可能会出现其他错误。Try/catch 语句与可以抛出异常的方法一起使用。例外的一个原因是，如果用户试图播放不存在的文件，当没有加载文件时，或者不能进行与文件的连接时，则不会产生。
有了Try/catch语句，这些条件就会无声地失败，但是如果您在Internet Explorer 9 F12工具中打开控制台或脚本标签，您就会看到这些错误。例如，如果没有音频文件播放或加载，快速向前、倒带和重启函数会抛出“InvalidStateError”DOMExceptions。
下面的代码示例解释了这个主题的所有概念。
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Audio Player </title>
<!-- Uncomment the following meta tag if you have issues rendering this page on an intranet site. -->
<!-- <meta http-equiv="X-UA-Compatible" content="IE=9"/> -->
<script type="text/javascript">
// Global variable to track current file name.
var currentFile = "";
function playAudio() {
// Check for audio element support.
if (window.HTMLAudioElement) {
try {
var oAudio = document.getElementById('myaudio');
var btn = document.getElementById('play');
var audioURL = document.getElementById('audiofile');
//Skip loading if current file hasn't changed.
if (audioURL.value !== currentFile) {
oAudio.src = audioURL.value;
currentFile = audioURL.value;
}
// Tests the paused attribute and set state.
if (oAudio.paused) {
oAudio.play();
btn.textContent = "Pause";
}
else {
oAudio.pause();
btn.textContent = "Play";
}
}
catch (e) {
// Fail silently but show in F12 developer tools console
if (window.console && console.error("Error:" + e));
}
}
}
// Rewinds the audio file by 30 seconds.
function rewindAudio() {
// Check for audio element support.
if (window.HTMLAudioElement) {
try {
var oAudio = document.getElementById('myaudio');
oAudio.currentTime -= 30.0;
}
catch (e) {
// Fail silently but show in F12 developer tools console
if (window.console && console.error("Error:" + e));
}
}
}
// Fast forwards the audio file by 30 seconds.
function forwardAudio() {
// Check for audio element support.
if (window.HTMLAudioElement) {
try {
var oAudio = document.getElementById('myaudio');
oAudio.currentTime += 30.0;
}
catch (e) {
// Fail silently but show in F12 developer tools console
if (window.console && console.error("Error:" + e));
}
}
}
// Restart the audio file to the beginning.
function restartAudio() {
// Check for audio element support.
if (window.HTMLAudioElement) {
try {
var oAudio = document.getElementById('myaudio');
oAudio.currentTime = 0;
}
catch (e) {
// Fail silently but show in F12 developer tools console
if (window.console && console.error("Error:" + e));
}
}
}
</script>
</head>
<body>
<p>
<input type="text" id="audiofile" size="80" value="demo.mp3" />
</p>
<audio id="myaudio">
HTML5 audio not supported
</audio>
<button id="play" onclick="playAudio();">
Play
</button>
<button onclick="rewindAudio();">
Rewind
</button>
<button onclick="forwardAudio();">
Fast forward
</button>
<button onclick="restartAudio();">
Restart
</button>
</body>
</html>
550
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
