如何在H5页面上添加音乐播放

在制作网页的时候，经常会遇到一些带音乐播放的场景，作品的右上角有一个音频按钮，会播放音乐，点击切换播放和暂停。下面就讲一讲如何在h5网页上添加音乐播放。

其实是很简单的，只需要简单几步就可以完成了

1、加入HTML代码，因为是绑定在每一页的右上方（或者其他位置），所以定位用了fixed，在页面底部/body之前加上html代码

<span id="musicControl"><a id="mc_play" class="on" οnclick="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.οnlοad=function(){if (!is_weixn()){just_play();}}

注意：这里还加入了一个方法判断是否是在微信内打开，如果不是在微信内就自动播放，在微信内部需要点击按钮才变换为播放状态，如果不需要这个功能的话，注释掉以下代码即可

/*window.οnlοad=function(){if (!is_weixn()){just_play();}}*/

以上代码就可以实现一个音乐播放了，是不是很简单呀，快上手试试吧。

如何在H5页面上添加音乐播放相关推荐

html5中加入音乐怎么弄,如何在H5页面上添加音乐播放
在制作网页的时候,经常会遇到一些带音乐播放的场景,作品的右上角有一个音频按钮,会播放音乐,点击切换播放和暂停.下面就讲一讲如何在h5网页上添加音乐播放. 其实是很简单的,只需要简单几步就可以完成了 1 ...
【微杂志制作工具】名编辑电子杂志大师教程 | 如何在flash电子杂志中添加音乐
(一)添加背景音乐方法:打开名编辑电子杂志大师,进入模板设置版面,在工具栏选项下拉栏中找到声音选项,然后从电脑中添加音乐文件. (设计设置 -> 工具栏选项 -> 按钮栏 -> 声 ...
一种解决h5页面背景音乐不能自动播放的方案
一种解决h5页面背景音乐不能自动播放的方案场景:微信.浏览器.App 普通解决方案:采用audio标签的autoplay属性现象: 1.大部分IOS系统和少部分Android微信不支持自动播放解 ...
jekyll个人博客中添加音乐播放插件
方法一: 环境要求 jekyll 七牛开始使用 step1 首先下载这个文件open-embed.html,右键,另存为Html;下面是源码,也可以复制保存下面的源码; <style> ...
怎样在html中加入音乐播放器,如何在网页中添加音乐播放器
小编其实一个很痴迷音乐的人,每当我用电脑工作的时候,都会打开播放器播放音乐的,然后顿时觉得很舒适,如果我们在别人浏览网页的时候加个音乐播放器播放音乐的话,那么我们的网页就会给别人带来很舒适的感觉.DW ...
html中加入音乐播放器,HTML网页添加音乐播放器做背景音乐代码-标签audio
是 HTML 5 的一个新标签,定义声音,比如音乐或其他音频流. 调用格式: src="http://sc1.111ttt.com/2016/1/02/04/195040016323.mp3 ...
php加本地音乐代码,WordPress添加音乐播放器（纯代码实现）
一.前言为WordPress网站添加一个音乐播放器,网上大部分的教程都是使用各种插件,有的插件还需要花钱买授权,用着不爽.本文用纯代码为网站添加音乐播放器,安全可靠,可以任意修改. 二.效果图三. ...
博客园添加背景音乐以及播放器或在左下方固定位置添加音乐播放器给你的博文锦上添花，增姿添彩
官方教程:https://aplayer.js.org/#/zh-Hans/ 一.第一种样式这种你想添加多少音乐就添加多少音乐! 将下方代码复制到博客侧边栏! 话不多说! 上代码! <!-- ...
如何在Mac电脑上添加或删除受信任的电话号码？
受信任的电话号码用于在其他设备或浏览器登陆时验证您的身份,获取验证码在另一设备上登陆.那我们如何在Mac电脑上添加或删除受信任的电话号码呢?小编给大家带来了详细的图文教程,需要的朋友欢迎参考操作! 具 ...

如何在H5页面上添加音乐播放

如何在H5页面上添加音乐播放相关推荐

最新文章

热门文章