如何在H5页面上添加音乐播放
在制作网页的时候,经常会遇到一些带音乐播放的场景,作品的右上角有一个音频按钮,会播放音乐,点击切换播放和暂停。下面就讲一讲如何在h5网页上添加音乐播放。
其实是很简单的,只需要简单几步就可以完成了
1、加入HTML代码,因为是绑定在每一页的右上方(或者其他位置),所以定位用了fixed,在页面底部/body之前加上html代码
<span id="musicControl">
<a id="mc_play" class="on" onclick="play_music();">
<audio id="musicfx" loop="loop" autoplay="autoplay">
<source src="mp3/Dreams.mp3" type="audio/mpeg">
</audio>
</a>
</span>
这里的source 标签对应的音频链接换为自己的音频连接
2、接下来设置css样式
/* music */
@-webkit-keyframes reverseRotataZ{
0%{-webkit-transform: rotateZ(0deg);}
100%{-webkit-transform: rotateZ(-360deg);}
}
@-webkit-keyframes rotataZ{
0%{-webkit-transform: rotateZ(0deg);}
100%{-webkit-transform: rotateZ(360deg);}
}
#musicControl { position:fixed;right:10px;top:20px;margin-top:0;display:inline-block;z-index:99999999}
#musicControl a { display:inline-block;width:25px;height:25px;overflow:hidden;background:url('../img/play.png') no-repeat;background-size:100%;}
#musicControl a audio{width:100%;height:56px;}
#musicControl a.stop { background-position:left bottom;}
#musicControl a.on { background-position:0px 1px;-webkit-animation: reverseRotataZ 1.2s linear infinite;}
#music_play_filter{width:100%;height:100%;overflow:hidden;position:fixed;top:0;left:0;z-index:99999998;}
这里添加了1个反转图标的H5动画规则,图标如下
3、接下来加入<script>代码
<!-- music -->
<script>
function play_music(){
if ($('#mc_play').hasClass('on')){
$('#mc_play audio').get(0).pause();
$('#mc_play').attr('class','stop');
}else{
$('#mc_play audio').get(0).play();
$('#mc_play').attr('class','on');
}
$('#music_play_filter').hide();
event.stopPropagation(); //阻止冒泡
}
function just_play(id){
$('#mc_play audio').get(0).play();
$('#mc_play').attr('class','on');
if (typeof(id)!='undefined'){
$('#music_play_filter').hide();
}
event.stopPropagation(); //阻止冒泡
}
function is_weixn(){
return false;
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger") {
return true;
} else {
return false;
}
}
var play_filter=document.getElementById('music_play_filter');
play_filter.addEventListener('click', function(){
just_play(1);
});
play_filter.addEventListener('touchstart', function(){
just_play(1);
});
play_filter.addEventListener('touchend', function(){
just_play(1);
});
play_filter.addEventListener('touchmove', function(){
just_play(1);
});
play_filter.addEventListener('mousedown', function(){
just_play(1);
});
play_filter.addEventListener('mouseup', function(){
just_play(1);
});
play_filter.addEventListener('mousemove',function(){
just_play(1);
});
window.onload=function(){
if (!is_weixn()){
just_play();
}
}
注意:这里还加入了一个方法判断是否是在微信内打开,如果不是在微信内就自动播放,在微信内部需要点击按钮才变换为播放状态,如果不需要这个功能的话,注释掉以下代码即可
/*window.onload=function(){
if (!is_weixn()){
just_play();
}
}*/
以上代码就可以实现一个音乐播放了,是不是很简单呀,快上手试试吧。
本文转载自https://blog.csdn.net/yerongtao/article/details/78110262
微信扫描下方的二维码阅读本文
阅读剩余
版权声明:
标题:如何在H5页面上添加音乐播放
作者:admin
链接:https://www.kmtky.com/44.html
文章版权归作者所有,未经允许请勿转载。
声明:仅供内部测试和技术交流使用,任何非法商业使用及商业利益冲突带来的法律纠纷,与本人无关,本人概不负责,请下载后24小时内删除,谢谢合作!如有侵权请于作者联系,尽快删除。
标题:如何在H5页面上添加音乐播放
作者:admin
链接:https://www.kmtky.com/44.html
文章版权归作者所有,未经允许请勿转载。
声明:仅供内部测试和技术交流使用,任何非法商业使用及商业利益冲突带来的法律纠纷,与本人无关,本人概不负责,请下载后24小时内删除,谢谢合作!如有侵权请于作者联系,尽快删除。
THE END