JavaScript 控制html5 audio的播放 暂停 重播

发表于 更新于 分类于 ， Waline： 本文字数： 2.3k 阅读时长 ≈ 2 分钟

实例代码

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
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>javascript audio 播放 暂停 重播Demo</title>
</head>
<body> 
    <audio src="http://audio.xmcdn.com/group58/M07/C0/DC/wKgLglzBws3ydc59AAQFZSpj3Eo398.m4a" controls="controls" preload id="music1"
        hidden></audio>
    <input type="button" value="播放" id=play_stop onclick="playOrPause();">
    <input type="button" value="重播" id="replay" onclick="replay();">
    <script>
        //重新播放
        function replay() {
            var audio = document.getElementById('music1');
            audio.currentTime = 0;
            //不管是否播放或者暂停都直接播放
            audio.play();
        }
        //播放或者暂停
        function playOrPause() {
            var audio = document.getElementById('music1');
            var play_stop=document.getElementById('play_stop');
            if (audio !== null) {
                //检测播放是否已暂停
                //audio.paused在播放器播放时返回false.
                //如果已经暂停了,那就播放
                if (audio.paused) {
                    play_stop.value="暂停";
                    //这个就是播放
                    audio.play();
                } else {
                    //如果已经播放了,那就暂停
                    play_stop.value="播放";
                    audio.pause();// 这个就是暂停
                }
            }
        }
    </script>
</body>
</html>

压缩的代码

1
2
3
4
5
<audio src="http://audio.xmcdn.com/group58/M07/C0/DC/wKgLglzBws3ydc59AAQFZSpj3Eo398.m4a" controls="controls" preload id="m" hidden></audio><input type="button" value="播放" id=p_s onclick="ps();"><input type="button" value="重播" id="rp" onclick="rp();">
<script>
function rp(){var a = document.getElementById('m'); a.currentTime = 0; a.play();}
function ps() {var a = document.getElementById('m');var p_s=document.getElementById('p_s');if (a !== null) {if (a.paused) {p_s.value="暂停";a.play();} else {p_s.value="播放";a.pause();}}}
</script>

运行效果

参考资料

https://www.cnblogs.com/kingplus/p/5587441.html