HTML5实现使用按钮控制背景音乐开关的方法-木庄网络博客

2022-03-06 18:28:32 PHP中文网 JavaScript 百度已收录

本文摘自PHP中文网，作者不言，侵删。

这篇文章主要介绍了关于HTML5实现使用按钮控制背景音乐开关的方法，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

我们有时会在页面上加上背景音乐，允许用户自己开启和关闭背景音乐，尤其基于手机html5制作的多媒体页面，HTML5的audio音频标签可以获取音频的播放状态，通过触摸按钮就可以关闭和开启背景音乐。

效果图如下所示：

查看演示效果源码下载

HTML

建立一个HTML5页面，放置<audio>标签，设置音频文件源，设置循环播放。准备两张图片，分别表示开启和暂停背景音乐两种状态，可以点击。

XML/HTML

1 2	`<audio` `id="music2"` `src="music.mp3"` `loop="loop">你的浏览器不支持audio标签。</audio>` `<a` `href="javascript:playPause();"><img` `src="pause.gif"` `width="48"` `height="50"` `id="music_btn2"` `border="0"></a>`

Javascript

阅读剩余部分

相关阅读 >>

更多相关阅读请进入《HTML5》频道 >>

书籍

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者