轩枫阁

首页 / Web前端 / HTML / HTML5 Audio-使用 JavaScript 控制 Audio 对象

HTML5 Audio-使用 JavaScript 控制 Audio 对象

阅读：32263 评论：12 作者：ivan 分类：HTML、Web前端

HTML5 中的 audio 对象提供可用于通过 JavaScript 控制播放的方法、属性以及事件。

在 JavaScript 中播放和暂停音频播放

使用 HTML5 audio 元素入门中所述的 HTML5  audio 元素可向网页中添加音频，而无需使用外部控件或程序。但是，除非你的网页只需要一个简单的音频播放器，否则你很可能想对加载的音频文件及其播放拥有更多的控制。若要将 audio 元素与 JavaScript 结合使用，请定义 audio 标记，该标记具有 “ID” 并且可以选择省略其他所有内容。如 HTML5 audio 元素入门中所述，你可以显示或隐藏内置控件，或将音频设置为在页面加载时自动播放。使用 JavaScript，你仍然可以执行该操作并且还可以执行进一步操作。

在以下示例中，我们在 HTML 中使用简单的 audio 标记语法。

注意  如果你是在 Intranet 上进行开发并且有 HTML5 的呈现问题，则可以向网页的 <head> 块中添加 <meta http-equiv-“X-UA-Compatible” content=”IE=9”/> 以强制 Windows Internet Explorer 9 使用最新标准。如果愿意，可以将 Web 开发服务器配置为发送带 IE=9 的元 http-equiv-“X-UA-Compatible” 标头。

1
<input type="text" id="audiofile" size="80" value="demo.mp3" />

音频播放器的所有其他功能可通过 JavaScript 进行控制，如以下脚本所示。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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));
                }
            }
        }

 

在示例的 HTML 部分，为 audio 元素指定 id=”myaudio” 和源文件 “demo.mp3″。定义 id=”play” 的按钮和触发 “playAudio()”JavaScript 函数的 onclick 事件。

在 JavaScript 部分中，使用 document.getElementById 返回 audio 对象。 play 和 pause 方法用于提供播放控制。检索 button 对象以便可以在“播放”和“暂停”之间切换按钮标签，具体情况取决于 audio 对象的 paused 属性的状态。 每次调用 “playAudio” 函数时都会检查该状态。 如果音频文件正在播放，则 paused属性返回 false，并且调用 pause 方法来暂停播放。按钮标签也设置为“播放”。

如果文件已暂停，则 paused 属性返回 true，并且调用 play 方法，按钮标签更新为“暂停”。第一次加载文件时，即使尚未显式调用 pause 方法，paused 属性也返回 true（播放已暂停）。

在 HTML 代码中，默认情况下按钮处于禁用状态。当页面加载时，在主体标记中使用 onload 事件调用 checkSupport() 函数。如果 audio 元素存在，则启用按钮。

在 JavaScript 中指定音频文件并管理播放

在第一个示例中，通过使用项目的 HTML 部分中的 source 标记来指定音频源文件。若要播放多个文件，则可以将 audio 对象的 src 属性设置为 JavaScript 中音频文件的 URL。

在下一示例中，在 HTML 部分添加了一个文本输入元素，在其中可以粘贴 MPEG-Layer 3 (MP3) 音频文件的路径。

与第一个示例不同，单击“播放”按钮可能意味着用户已更改了音频文件或他们已暂停了当前文件。由于在更改音频文件源时调用 src 方法会初始化暂停的状态，因此 “playAudio” 函数必须指示用户何时想要更改文件。定义全局变量 “currentFile”，以便该变量可以跟踪当前正在播放的文件的 URL。当用户单击“播放”按钮时，会将 “currentFile” 变量与 “audioURL.value” 指定的文本字段中的值进行比较。如果这些值不同，则将 src 属性设置为新文件 URL，更新 “currentFile” 变量，并调用 load 方法。

在本示例中，”currentFile” 变量跟踪文本字段的内容，而不是 audio 对象的 src 属性。原因在于，src 属性始终是文件的完全限定路径，而该文件可能与文本字段中的内容不匹配。例如，如果音频文件与网页的源代码位于相同的目录中，则可以只指定文件名。如果音频文件位于同一域的其他目录中，则包括路径，如 “music\demo.mp3″。如果文件位于其他站点上，则使用完全限定的域名和文件路径，如 “http:\\www.contoso.com\music\demo.mp3″。

当音频文件正在播放时， currentTime 属性会跟踪播放在音频剪辑中的位置。通过更改 currentTime 的值，你可以快进或快退或重新启动播放。该示例包括三个用于调用 rewindAudio、forwardAudio 和 restartAudio 函数的新按钮。 rewindAudio 和 forwardAudio 函数将 currentTime 的值减少或增加 30 秒。你可以将增量值更改为更大或更小的跳跃幅度。在 restartAudio 函数中，currentTime 的值设置为零，即表示文件的开头。

audio 对象还支持诸如 timeUpdate 事件之类的事件，这些事件用于跟踪文件的进度。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
// 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));
               }
            }

 

缓存错误

编写没有任何错误的代码是一件非常困难的事情。本示例包括几个建议，可能有助于你避免出错。

注意  此处的示例包括将错误发送到 F12 开发人员工具“控制台”或“脚本”选项卡的代码。

HTML 语言有一个特点，如果无法识别某个标记，则会将其忽略。在不支持 HTML5 的浏览器中，当使用 HTML5  audio 元素时，如果无法识别该元素，则使用标记之间的部分。在本示例中，将显示消息 HTML5 Audio is not supported（不支持 HTML5 音频），但也可以添加任意消息，使用其他技术，如 Microsoft Silverlight，或允许用户下载文件。如果支持 HTML5 音频，将忽略标记之间的部分。但是，有一个需要注意的问题。对于正常的浏览器查看，audio 标记之间的内容将被忽略，但是如果用户正在使用屏幕阅读器查看网页，阅读器也会阅读标记之间的内容。

在代码的 JavaScript 部分，有几个容易发生错误的地方。第一处是在检查 HTML5 音频支持性的时候。每个函数通过使用 if (window.HTMLAudioElement)进行测试，确定是否存在 audio 元素。如果 audio 元素不存在，则不会执行任何代码。

在本示例中，如果支持不存在，则会禁用按钮，也不会调用函数。但是，禁用对 JavaScript 函数的访问对于网页来说可能不太现实。

如果支持 HTML5 音频，则可能会发生其他错误。Try/catch 语句与可以引发异常的方法结合使用。异常的原因可能是，用户尝试播放不存在的文件、在未加载文件时后退或无法连接文件。

使用 Try/catch 语句，这些条件将会失败，但不会进行提示，但是如果在 Internet Explorer 9 F12 工具中打开“控制台”或“脚本”选项卡，则可以看到这些错误。例如，如果未播放或加载任何音频文件，则 Fast Forward、Rewind 和 Restart 函数会引发 “InvalidStateError” DOMExceptions。

以下代码示例解释了本主题的所有概念。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!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>

 

本系列内容

  1. HTML5 audio 元素入门：你可使用 audio 元素向你的网页中添加基本音频播放器，而无需脚本或加载项控件。
  2. 使用 JavaScript 控制 Audio 对象：HTML5 中的 audio 对象提供可用于通过 JavaScript 控制播放的方法、属性以及事件。
  3. 使用 Media 事件添加进度栏：media 提供 audio 对象可以使用的一系列丰富事件。可利用一组事件来获取可用于在播放音频文件时跟踪进度的状态数据。
  4. 支持多个音频文件格式：通过使用 audio 元素或对象支持多个音频格式，你可以将更多的听众从多个浏览器吸引到你的网页上。
389/470
391/470

相关阅读

文章评论

取消回复

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]

    点击开始录制，可以录制弹奏的曲子
    开始录制 完成录制 取消
    马上试听 重新录制 提交此曲
    分享钢琴节奏： 新浪微博 QQ空间