iphone6s IOS9 微信版本6.6.2 播放音乐BUG
发布于 5 年前 作者 wpeng 19776 次浏览 来自 问答

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](/user/-webkit-keyframes) rotation{
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}
回到顶部