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 : 40 rpx;
left : 20 rpx;
background : none ;
width : 60 rpx;
height : 60 rpx;
margin : 0 ;
padding : 0 ;
border-radius: 50% ;
}
.music {
width : 60 rpx;
height : 60 rpx;
display : block ;
background : #f30 ;
}
.playing{
background : #000 ;
-webkit-transform: rotate( 360 deg);
animation: rotation 2 s linear infinite;
-moz-animation: rotation 2 s linear infinite;
-webkit-animation: rotation 2 s linear infinite;
-o-animation: rotation 2 s linear infinite;
}
@-webkit-keyframes rotation{
from {-webkit-transform: rotate( 0 deg);}
to {-webkit-transform: rotate( 360 deg);}
}
|