原生js控制audio标签播放暂停重新加载

Posted 吴小明

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生js控制audio标签播放暂停重新加载相关的知识，希望对你有一定的参考价值。

audio不仅是一个标签，也是window下的一个对象，作为对象，具有一些对象属性和对象方法：

　　对象属性：

　　　　currentTime：获取当前播放时间

　　　　duration：获取歌曲的总时间

　　　　pause：是否暂停，返回布尔值

　　对象方法：

　　　　play()：播放

　　　　pause()：暂停

　　　　load()：重新加载

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>audio播放暂停重新播放</title>
</head>
<body>
    <audio
        src="https://ip-h5-nf01-sycdn.kuwo.cn/08fc62da0d838431d2c6135ddd66c5ae/5e1bdce5/resource/n2/97/38/2347707388.mp3"
        controls preload id="music1">
    </audio>
    <button id="bf" onclick="bf();">播放</button>
    <button onclick="rbf();">重新播放</button>
    <script>
        function rbf() {
            var audio = document.getElementById(‘music1‘);
            var bf=document.getElementById("bf");
            audio.currentTime = 0;
            audio.play();
            bf.innerText="暂停";
        }

        function bf() {
            var audio = document.getElementById(‘music1‘);
            var bf=document.getElementById("bf");
            if (audio !== null) {
                if (audio.paused) {
                    audio.play(); //audio.play();// 这个就是播放  
                    bf.innerText="暂停";
                } else {
                    audio.pause(); // 这个就是暂停
                    bf.innerText="播放";
                }
            }
        }
    </script>
</body>
</html>

以上是关于原生js控制audio标签播放暂停重新加载的主要内容，如果未能解决你的问题，请参考以下文章

html5 audio标签相关知识点总结

audio标签+JS实现音乐播放和暂停的功能

js控制H5 audio音频的播放暂停

js一加载网页就自动播放

html5 audio js控制暂停播放停止

js控制html5 audio的暂停播放停止