如何在H5页面上添加音乐播放 |
您所在的位置:网站首页 › 秀米如何加背景音乐和文字声音 › 如何在H5页面上添加音乐播放 |
在制作网页的时候,经常会遇到一些带音乐播放的场景,作品的右上角有一个音频按钮,会播放音乐,点击切换播放和暂停。下面就讲一讲如何在h5网页上添加音乐播放。 其实是很简单的,只需要简单几步就可以完成了 1、加入HTML代码,因为是绑定在每一页的右上方(或者其他位置),所以定位用了fixed,在页面底部/body之前加上html代码 这里的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动画规则,图标如下
注意:这里还加入了一个方法判断是否是在微信内打开,如果不是在微信内就自动播放,在微信内部需要点击按钮才变换为播放状态,如果不需要这个功能的话,注释掉以下代码即可 /*window.οnlοad=function(){ if (!is_weixn()){ just_play(); } }*/ 以上代码就可以实现一个音乐播放了,是不是很简单呀,快上手试试吧。
|
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |