HTML5背景音乐的暂停与播放

最新推荐文章于 2023-02-28 20:57:41 发布

最新推荐文章于 2023-02-28 20:57:41 发布 · 128 阅读

本文介绍了一种使用HTML5的<audio>标签实现网页背景音乐的自动播放，并通过JavaScript进行播放控制的方法。提供了具体的HTML代码示例，展示了如何设置音频文件的路径、类型以及循环播放等属性，并实现了点击图标来控制音乐播放或暂停的功能。

HTML代码：
    <audio id="myaudio" loop="loop" preload="auto" autoplay="autoplay">
                    <source src="music/纯音乐%20-%20在那遥远的地方%20-%20纯音乐版.mp3" type="audio/ogg" />
                    <source src="music/纯音乐%20-%20在那遥远的地方%20-%20纯音乐版.mp3" type="audio/mp3" />
                </audio>

       <img onclick="swap_music()" src="/images/icon_music.png" style="height:30px; vertical-align:middle;" />

JS代码：
//背景音乐停止与播放
        function swap_music() {
            var oAudio = document.getElementById('myaudio');
            if (oAudio.paused) {
                oAudio.play();
            }
            else {
                oAudio.pause();
            }
        }