HBuilder：微信h5实现音乐图标旋转播放，停止暂停

效果

代码实现

html

<!--       右上角音乐及图标--><section class="u-audio"><audio src="img/111.mp3" autoplay="autoplay" id="music"  preload loop="loop"></audio><div id="page1"><img id="rallback" src="img/normalmusic.svg" style="width: 60px;height: 60px;"></img></div></section><!--       右上角音乐及图标-->

js

<script type="text/javascript">window.onload = function() {/*右上角音乐及图标*/var flag = 1; //开启音乐var music = document.getElementById('music');var rallback = document.getElementById('rallback');window.onclick = function() {if(flag == 1) {music.pause(); /*音乐关闭*/flag = 0;rallback.style.webkitAnimationPlayState = "paused"; //旋转动画暂停} else {music.play(); /*音乐开启*/flag = 1;rallback.style.webkitAnimationPlayState = "running"; //旋转动画暂停}}/*不允许有多个onload*//*控制选项卡切换*/var myTab = document.getElementById("tab"); //整个divvar myUl = myTab.getElementsByTagName("ul")[0]; //一个节点var myLi = myUl.getElementsByTagName("li"); //数组var myDiv = myTab.getElementsByTagName("div"); //数组for(var i = 0; i < myLi.length; i++) {myLi[i].index = i;myLi[i].onclick = function() {for(var j = 0; j < myLi.length; j++) {myLi[j].className = "off";myDiv[j].className = "hide";}this.className = "on";myDiv[this.index].className = "show";}}}</script>

css

#page1 #rallback {/*css3动画无限制的旋转*/-webkit-animation: music_disc 4s linear infinite;animation: music_disc 4s linear infinite;/*-webkit-animation-direction:alternate;*//*//平滑的过渡---反方向运动*/
}/*  page1旋转暂停 animation-play-state属性 当你想在动画执行过程中暂停，并且接下来让动画接着执行。这时CSS的animation-play-state属性是非常有用的。你可以可以通过JavaScript像这样更改CSS(注意你的前缀)： element.style.webkitAnimationPlayState="paused";
element.style.webkitAnimationPlayState="running";*//*css3动画的旋转*/@-webkit-keyframes music_disc {0% {-webkit-transform: rotate(0deg);-ms-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);}100% {-webkit-transform: rotate(360deg);-ms-transform: rotate(360deg);-o-transform: rotate(360deg);}
}

img

HBuilder：微信h5实现音乐图标旋转播放，停止暂停相关推荐

iphone微信 h5页音乐自动播放
iphone微信 h5页音乐自动播放: // iphone自动播放document.addEventListener("WeixinJSBridgeReady", function ...
css3动画应用-音乐唱片旋转播放特效
css3动画应用-音乐唱片旋转播放特效核心点: 1.设置图片为圆形居中,使图片一直不停旋转. 2.文字标题(潘玮柏--反转地球)一直从左到右不停循环移动. 3.点击图标,音乐暂停,图片停止旋转:点击 ...
css3音乐播放动画,css3动画应用-音乐唱片旋转播放特效
css3动画应用-音乐唱片旋转播放特效核心点: 1.设置图片为圆形居中,使图片一直不停旋转. 2.文字标题(潘玮柏--反转地球)一直从左到右不停循环移动. 3.点击图标,音乐暂停,图片停止旋转:点击 ...
html 控制flash播放音乐,【答疑】Adobe Flash怎么插入音乐并控制播放与暂停? - 视频教程线上学...
Adobe Flash插入音乐的方法: 在制作中的flash中点击菜单栏:文件--导入--导入到库 (如果出错,请到本文后面看错误处理) 从元件库中可以看到刚刚导入的音乐.上面是音乐的波形图,下面是音 ...
微信小程序demo：QQ音乐；音乐搜索，音乐列表及播放停止
代码示例: [AppleScript] 纯文本查看复制代码 ? 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 ...
单击音乐图标，实现音乐的暂停与播放。
今天训练H5大赛的时候学习到了一个新的内容, 就是以上的题目. 一共三部曲. 废话不多说,上代码. 1.创建一个.html页面,并且引入音乐和图标,用来实现网页的显示. <!DOCTYPE ht ...
H5背景音乐自动播放和暂停
在微信里,音乐不能自动播放,为了让其自动播放,通过调用微信接口实现,代码如下: html: <audio id="yy" autoplay preload src=" ...
解决iphone 微信H5自动播放音乐问题
解决iphone 微信H5自动播放音乐问题参考文章: (1)解决iphone 微信H5自动播放音乐问题 (2)https://www.cnblogs.com/hlhs/p/11157401.html ...
微信小程序 - 页面背景音乐播放器控件（音乐盒图标旋转 360° 动画且可点击暂停与播放）
前言因为无法插入视频,您所看到的是效果图(实则控制音乐),运行起来有背景音乐. 默认直接播放音乐,用户可点击暂停与继续播放, 除了基础功能,也做好了播放.暂停.出错等监听,由您根据业务进行扩展. ...

HBuilder：微信h5实现音乐图标旋转播放，停止暂停

效果

代码实现

html

js

css

img

HBuilder：微信h5实现音乐图标旋转播放，停止暂停相关推荐

最新文章

热门文章