HTML5下的Audio标签控件的歌曲播放暂停演示
2014-09-02 11:56
429 查看
<!-- 使用了HTML5的标签<audio> 图片播放按钮增加了监听监听事件,控制音乐的播放暂停 使用了document的几个重要函数: 1.createElement创建标签对象, 2.getElementById获取对象以及img对象的src属性 3.document.body添加控件appendChild()函数 了解document的强大。可以创建对象,操作body标签等--> <!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <body> <h3>音乐播放暂停示例</h3> <p>点击按钮,播放、暂停音乐</p> <img id="image_button" src="source/pause.jpg" onclick="myFunction()"></button> <p id="txt">点击按钮播放音乐</p> <script type="text/javascript"> var isPlay = false; var x = document.createElement("AUDIO"); x.setAttribute("src", "source/music.mp3"); document.body.appendChild(x); function myFunction() { if (isPlay == false) { x.play(); document.getElementById("image_button").src="source/play.jpg"; document.getElementById("txt").innerHTML = "<浮夸> —— eason"; isPlay = true; }else{ x.pause(); document.getElementById("image_button").src="source/pause.jpg"; document.getElementById("txt").innerHTML = "点击按钮播放音乐"; isPlay = false; } } </script> </body> </html>
注意需要将pause.jpg,play.jpg,music.mp3放到source文件夹下面。
文件结构是{index.html,source[pause.jpg,play.jpg,music.mp3]} (index.html就是上面贴的代码文件,保存成html格式的。)
相关文章推荐
- html5,audio标签的autoplay="autoplay"在iphone上无法播放的问题
- HTML5 audio与video标签实现视频播放,音频播放
- Html5 audio标签实现音乐播放
- ios vue2.0使用html5中的audio标签不能播放音乐
- 低版本IE6/7/8浏览器中使用HTML5的audio和video标签播放视频音频
- HTML5 audio与video标签实现视频播放,音频播放
- ios加载html5 audio标签用js无法自动播放
- html5 audio标签切换播放音乐的方法
- HTML5 audio与video标签实现视频播放,音频播放
- html5 audio的暂停与播放
- js控制html5 audio的暂停、播放、停止
- HTML5 audio标签使用js进行播放控制实例
- HTML5-video标签-实现点击预览图播放或暂停视频
- [FAQ15257][Audio App]如何在通知栏上显示 music 播放/暂停 的控件
- HTML5中Audio标签的使用与通过JS暂停音乐播放器audio
- 利用html5标签audio在不同客户端下适配播放音频
- html5 audio的暂停与播放
- JS 控制 audio 标签 播放/暂停 音乐
- audio 标签 MP3播放 暂停/播放
- Html5-audio标签简介及手机端不自动播放问题