后盾之网页背景音乐 · TP5常用代码

## 知识点 1、触摸事件 2、旋转的音乐图标 3、背景音乐效果的控制 4、移动端css兼容性的解决思路 5、移动端音乐自动播放的处理方法 6、相关视频下载 [TOC] ## 一、触摸事件 HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend) HTML5中新添加了很多事件，但是由于他们的兼容问题不是很理想，应用实战性不是太强，所以在这里基本省略咱们只分享应用广泛兼容不错的事件，日后随着兼容情况提升以后再陆续添加分享。今天为大家介绍的事件主要是触摸事件：touchstart、touchmove和touchend。 touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。 touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。 touchend事件：当手指从屏幕上离开的时候触发。 touchcancel事件：当系统停止跟踪触摸的时候触发。关于这个事件的确切出发时间，文档中并没有具体说明，咱们只能去猜测了。后盾CSS3视频教程 https://www.bilibili.com/video/av30185117/?p=68 后盾CSS3视频教程 http://www.houdunwang.com/houdunren18_lesson_254?vid=11990 懒人原生css3可控旋转音乐播放按钮 http://www.lanrenzhijia.com/js/css3/3064.html ## 二、旋转的音乐图标 ### 1、结构 ~~~ <img src="../static/index/default/images/music.svg" id="mpic"> <audio loop="" src="https://res1.eqh5.com/2a2bdb15b9e545f28396cb68fe75054a.mp3" autoplay="" preload="" id="music"></audio> ~~~ ### 2、引入文件样式文件 jQuery文件 ### 3、功能实现 ~~~ $('#mpic').on('touchstart',function(){ console.log('touchstart'); }); $('#mpic').on('touchend',function(){ console.log('touchend'); }) ~~~ ## 三、背景音乐效果的控制 ### 暂停或切换当m=1时，背景旋转，音乐播放当m=2时，背景停止，音乐停止 ~~~ <script> var m=1; $('#mpic').on('touchstart',function(){ if (m==1) { $('#mpic').css({ 'animation-play-state':'paused', }); m=2; }else{ $('#mpic').css({ 'animation-play-state':'running', }); m=1; } }); </script> ~~~ ### 暂停播放音乐 ~~~ 原生写法pause() document.getElementById('music').pause(); jQuery对象转换原生写法 $('#music')[0].pause(); ~~~ ### 播放音乐 ~~~ $('#music')[0].play(); ~~~ ### 完整代码 ~~~ <script> var m=1; $('#mpic').on('touchstart',function(){ if (m==1) { $('#mpic').css({ 'animation-play-state':'paused', }); $('#music')[0].pause(); m=2; }else{ $('#mpic').css({ 'animation-play-state':'running', }); $('#music')[0].play(); m=1; } }); </script> ~~~ ## 四、移动端css兼容性的解决思路 ~~~ #mpic{ width: 45px; height: 45px; position: fixed; left: 62px; top: 88px; z-index: 200; -webkit-animation: r 5s linear infinite; -moz-animation: r 5s linear infinite; -o-animation: r 5s linear infinite; animation: r 5s linear infinite; } @-webkit-keyframes r { from{ -webkit-transform: rotate(0deg); } to{ -webkit-transform: rotate(360deg); } } @-moz-keyframes r { from{ -moz-transform: rotate(0deg); } to{ -moz-transform: rotate(360deg); } } @-o-keyframes r { from{ -o-transform: rotate(0deg); } to{ -o-transform: rotate(360deg); } } @keyframes r { from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } } ~~~ ## 五、移动端音乐自动播放的处理方法所有移动端都是禁止自动播放的，即禁止autoplay属性 ### 1、去掉HTMLautoplay属性 ~~~ <audio loop="" src="https://res1.eqh5.com/2a2bdb15b9e545f28396cb68fe75054a.mp3" id="music"></audio> ~~~ ### 2、CSS添加停止属性 ~~~ #mpic{ width: 45px; height: 45px; position: fixed; left: 62px; top: 88px; z-index: 200; -webkit-animation: r 5s linear infinite; -moz-animation: r 5s linear infinite; -o-animation: r 5s linear infinite; animation: r 5s linear infinite; animation-play-state:paused; } @-webkit-keyframes r { from{ -webkit-transform: rotate(0deg); } to{ -webkit-transform: rotate(360deg); } } @-moz-keyframes r { from{ -moz-transform: rotate(0deg); } to{ -moz-transform: rotate(360deg); } } @-o-keyframes r { from{ -o-transform: rotate(0deg); } to{ -o-transform: rotate(360deg); } } @keyframes r { from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } } ~~~ ### 3、功能实现 ~~~ <script> var m=2; document.ontouched = function(){ $('#mpic').css({ 'animation-play-state':'running', }); $('#music')[0].play(); m=1; document.ontouched = null; } $('#mpic').on('touchstart',function(){ if (m==1) { $('#mpic').css({ 'animation-play-state':'paused', }); $('#music')[0].pause(); m=2; }else{ $('#mpic').css({ 'animation-play-state':'running', }); $('#music')[0].play(); m=1; } }); </script> ~~~ ### 4、升级事件可以改写成one事件：键盘事件和单击事件，限制只执行一次 ~~~ document.one('touchend',function(){ $('#mpic').css({ 'animation-play-state':'running', }); $('#music')[0].play(); m=1; }; ) ~~~ ## 六、相关视频下载 1、腾讯微云 ~~~ 已上传至微云 ~~~ 2、百度网盘