iphone6s IOS9 微信版本6.6.2 播放音乐，第一次暂停需要点击2次才会暂停，另外切换前后台，也并没有按代码的执行暂停。
代码如下
<view bindtap="switchMusic" class="music-wrapper">
<view wx:if="{{isPlay}}" class="playing music"></view>
<view wx:else class="music"></view>
</view>
|
const app = getApp()
Page({
data: {
isPlay: true,
musicUrl: '/images/bg.mp3'
},
onShow() {
if (this.data.isPlay) {
this.data.audioCtx.play()
}
},
onHide(){
this.data.audioCtx.pause()
},
onLoad() {
let audioCtx = wx.createInnerAudioContext()
this.setData({
audioCtx: audioCtx
})
this.data.audioCtx.autoplay = true
this.data.audioCtx.loop = true
this.data.audioCtx.src = this.data.musicUrl
this.data.audioCtx.onPlay(() => {
console.log('播放中')
})
this.data.audioCtx.onPause(() => {
console.log('暂停中')
})
},
switchMusic() {
if (!this.data.isPlay) {
this.data.audioCtx.play()
this.setData({
isPlay: true
})
} else {
this.data.audioCtx.pause()
this.setData({
isPlay: false
})
}
}
})
|
.music-wrapper {
position: fixed;
z-index: 100000;
top: 40rpx;
left: 20rpx;
background: none;
width: 60rpx;
height: 60rpx;
margin: 0;
padding: 0;
border-radius: 50%;
}
.music {
width: 60rpx;
height: 60rpx;
display: block;
background: #f30;
}
.playing{
background: #000;
-webkit-transform: rotate(360deg);
animation: rotation 2s linear infinite;
-moz-animation: rotation 2s linear infinite;
-webkit-animation: rotation 2s linear infinite;
-o-animation: rotation 2s linear infinite;
}
@-webkit-keyframes rotation{
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
|
