常用----音乐切换

音乐按钮自动以旋转以及音乐切换【mu1.png和mu2.png对应音乐播放按钮切换，music为音乐资源】

HTML:(bf为音乐以及效果切换函数)

<audio controls="controls"  loop="loop" id="music1" autoplay hidden><source src="img/music.mp3" type="audio/mp3">
</audio>
<div id="musicbtn" onclick="bf()"></div>

JS:(注意：使用jquery或者zepto或者原生js时候，记得使用对应的样式函数去做修改；获取audio时候使用原生js获取做好)

 //            音乐播放切换function bf(){var audio = document.getElementById('music1');if(audio!==null){//检测播放是否已暂停.audio.paused 在播放器播放时返回false.if(audio.paused){$("#musicbtn").css({"background":"url('img/mu2.png') no-repeat","animation":"rotate 3s linear infinite"})audio.play();//audio.play();// 这个就是播放}else{$("#musicbtn").css({"background":"url('img/mu1.png') no-repeat","animation":"none"})audio.pause();// 这个就是暂停}$("#musicbtn").css("backgroundSize","cover")}}

CSS:

/*音乐*/
#musicbtn{position:fixed;width: 0.8rem;height:0.8rem;background: url("../img/mu2.png");background-size: cover;background-repeat: no-repeat;right: 0;margin-top: 0.6rem;margin-right: 0.5rem;z-index: 2;-webkit-transition-property: -webkit-transform;-webkit-transition-duration: 1s;-moz-transition-property: -moz-transform;-moz-transition-duration: 1s;-webkit-animation: rotate 3s linear infinite;-moz-animation: rotate 3s linear infinite;-o-animation: rotate 3s linear infinite;animation: rotate 3s linear infinite;}
@-webkit-keyframes rotate{from{-webkit-transform: rotate(0deg)}to{-webkit-transform: rotate(360deg)}
}
@-moz-keyframes rotate{from{-moz-transform: rotate(0deg)}to{-moz-transform: rotate(359deg)}
}
@-o-keyframes rotate{from{-o-transform: rotate(0deg)}to{-o-transform: rotate(359deg)}
}
@keyframes rotate{from{transform: rotate(0deg)}to{transform: rotate(359deg)}
}

常用----音乐切换相关推荐

从CarLife音乐切换回蓝牙音乐音量变小
iPhone从CarLife音乐切换到蓝牙音乐音量变小现象分析总结现象 iPhone7 Plus,IOS版本10.2.1,播放蓝牙音乐,然后切换到CarLife音乐,然后再切换到蓝牙音乐,期间 ...
【Music】音乐切换封面没有变化
问题:从一首有封面的音乐切换到没有封面的音乐,封面没有变化 MediaPlaybackActivity :音乐播放中的界面,切换到没有封面的音频时封面没有变化. 布局文件:R.layout.Audio ...
游戏中常用音乐风格分析
不同的游戏有不同的玩法,每种不同的玩法都是不同的风格,每款游戏都配备了不同场景的音乐,根据音乐的场景不同,以及游戏风格的不同,游戏音乐风格也多种多样,今天我们来聊聊游戏音乐常用的风格有哪些? (一)按 ...
html 音乐切换不暂停,web-audio-api可视化音乐播放器，实现暂停切换歌曲功能，粉色系专场~...
可视化的音乐播放器,可戳我观看效果了解Web-Audio-Api 基础知识标签是HTML5的新标签,通过添加src属性实现音乐播放. AudioContext是音频播放环境,原理与canvas的绘 ...
如何从Google Play音乐切换到YouTube音乐
Google 谷歌 Google Play Music is going away. Google's first music service will be shut down by Decembe ...
适用于计算机/手机的常用音乐播放器推荐
文章来源:https://www.reneelab.com.cn/best-music-player.html 目录一.计算机音乐播放器推荐 1.Windows Media Player 2.VLC ...
Unity多个音乐切换播放方法
首先看播放音频的代码: this.GetComponent<AudioSource>().Play(); 下面还是用一个实例来讲解吧. 首先必须要有一个AudioSource组件.那么我就 ...
【分享】常用音乐软件的选择
在以前,人们听歌需要买CD.磁带,还要有对应的播放设备.后来,有一台MP3音乐设备就能畅听一堆的歌曲,到了现在,人们使用智能手机就能轻松听歌.目前的音乐类软件非常多,哪个更好用一些,怎么把CD上的歌曲 ...
仿网易云音乐切换主题
我是一个只会搬运代码不会生产代码的搬运工(以下内容都是github开源项目使用心得) 其他我也不多说先开效果图: 效果大概就这样子下面我讲一下这个改咋用 demo地址:https:/ ...

常用----音乐切换

常用----音乐切换相关推荐

最新文章

热门文章