第一步肯定是先写音乐样式 下面是代码`
<view :class="{music:isMusic,rotate:isRoate}" @click="musicClick" > <view class="iconfont icon-yinle musicIcon"></view> </view> data(){ isRoate:true, isMusic:true, } musicClick(){ if(this.isRoate){ this.isRoate = false this.stopScanAudio() }else{ this.isRoate=true this.ScanAudio() } } .music{ position: fixed; top: 10px; left: 88%; height: 40px; line-height: 40px; width: 40px; border-radius: 40px; color: #FFFFFF; z-index: 999; background: rgba(51, 51, 51, 0.5); text-align: center; } .rotate{ -webkit-animation: rotating 1.2s linear infinite; -moz-animation: rotating 1.2s linear infinite; -o-animation: rotating 1.2s linear infinite; animation: rotating 1.2s linear infinite } @-webkit-keyframes rotating { from { -webkit-transform: rotate(0) } to { -webkit-transform: rotate(360deg) } } @keyframes rotating { from { transform: rotate(0) } to { transform: rotate(360deg) } } @-moz-keyframes rotating { from { -moz-transform: rotate(0) } to { -moz-transform: rotate(360deg) } } .musicIcon{ font-size: 20px; }这时候音乐图标默认是旋转的，当你点击的时候触发点击事件就停止了 第二部就是音频组件 下面是代码 首先你要在main.js文件里全局调用
const innerAudioContext = uni.createInnerAudioContext(); //播放音频 Vue.prototype.ScanAudio = function(){ var that = this uni.request({ url:that.localUrl+'v1.active/index', header: {'content-type': 'application/x-www-form-urlencoded'},//自定义请求头信息 method: 'GET', data: { token:uni.getStorageSync('token') }, success:res =>{ if(res.data.code == 200){ console.log(innerAudioContext) innerAudioContext.autoplay = true innerAudioContext.src= that.imgUrl+ res.data.data.music; innerAudioContext.play(); } } }) } //暂停音频 Vue.prototype.stopScanAudio = function(){ console.log(innerAudioContext) innerAudioContext.pause(); }这里是我调用后端的音频文件，如果音频文件不用替换，就不用请求接口了
