欢迎来到天天文库
浏览记录
ID:8992661
大小:19.95 KB
页数:3页
时间:2018-04-14
《使用按钮控制html5背景音乐开关》由会员上传分享,免费在线阅读,更多相关内容在应用文档-天天文库。
1、3Web前端视频教程http://www.maiziedu.com/course/web/使用按钮控制HTML5背景音乐开关在多媒体技术发展如此成熟的当下,很多时候我们在浏览网页网页的时候,如果能有点背景音乐什么的,将是一件锦上添花的事情。但是有时候,我们又不希望他播放,所以页面在设置上必须设置为允许用户自己开启和关闭背景音乐。对PC端网页背景音乐的开启或关闭,我们都很熟悉了,但是对于基于手机的html5制作的多媒体页面,背景音乐又怎么允许用户自行开启或关闭呢?其实,HTML5的audio音频标签可以获取音频的播放状态,通过触摸按钮就可以关闭和开启背景音乐。下面我们一起来看看具体的实现
2、吧。建立一个HTML5页面,放置标签,设置音频文件源,设置循环播放。准备两张图片,分别表示开启和暂停背景音乐两种状态,并设置为可点击。你的浏览器不支持audio标签。在点击开关图片按钮的时候调用了javascript脚本,playPause()函数。函数中判断audi
3、o音频播放状态,如果已经停止(paused)则调用.play()继续播放,如果是在播放状态,则立即暂停播放.pause(),两种状态切换时及时更新按钮图片,具体实现代码如下:functionplayPause(){varmusic=document.getElementById(‘music2’);3Web前端视频教程http://www.maiziedu.com/course/web/varmusic_btn=document.getElementById(‘music_btn2’);if(music.paused){music.play();music_btn.src=‘play.
4、gif’;}else{music.pause();music_btn.src=‘pause.gif’;}}如果使用jQuery代码,则可以通过以下代码实现:你的浏览器不支持audio标签。1.这里需要值得特别注意的一点,就
6、是要记得加载jQuery库文件。对html5页面的背景音乐开关进行设置,让用户自行选择开关背景音乐,这将极大提升用户体验度,是HTML5开发人员必须get的一项技能,如果还没看明白的亲,就赶紧收藏吧。
此文档下载收益归作者所有