h5播放音乐
2015-06-03 18:51
627 查看
h5音频播放,里面参数可以查看http://www.w3school.com.cn/html5/html_5_audio.asp
<audio controls="controls"> <source src="song.ogg" type="audio/ogg"> <source src="song.mp3" type="audio/mpeg"> Your browser does not support the audio tag. </audio>
html部分:
<div style="z-index: 999; width: 30px; height: 30px; position: absolute; top: 2%; left: 89%; cursor: pointer;" id="mplay"> <audio autoplay="autoplay" loop="loop" id="audio" src="http://www.eyee.cn/Public/Uploads/images/2015/04/27/699/553df80928571.mp3"> <!-- <source src="song.mp3" type="audio/mpeg"></source> -->使用本地音乐 </audio> </div>
js效果:可以通过点击一张图片来控制音乐的播放和暂停
var sj_music = true; var music = document.getElementById("audio"); $("#mplay").click(function(){ if(sj_music){ $(this).css("background-image","url(images/musicoff.png)"); music.pause(); sj_music = false; }else{ $(this).css("background","url(images/musicon.png)"); music.play(); sj_music = true; } });
效果如下:
播放时效果
暂停时效果
相关文章推荐
- HTML5Ssec.org中文版
- HTML5学习笔记 音频
- 开发者必须知道的HTML5十五大新特性
- HTML5 新的 Input 类型
- 如何让Dreamweaver CS5支持Html5
- 读过的书
- html5横、竖屏状态 以及禁止横屏
- Html5 读取csv文件(包含其他文件)
- HTML5
- HTML5学习笔记3 内联SVG
- HTML5自定义属性对象Dataset
- HTML5 localStorage本地存储实际应用举例
- HTML5学习笔记 视频
- HTMl5的sessionStorage和localStorage
- HTML5新属性之required
- Html5响应式设计实现九宫格
- html5 placeholder
- HTML5中meta属性的使用详解之声明
- html5前端图片压缩打水印
- html5第一个页面。登录加倒计时