收藏
回答

iphone6s IOS9 微信版本6.6.2 播放音乐BUG

框架类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本
小程序 createInnerAudioContext 客户端 iOS 6.6.2 1.9.1

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);}
}


回答关注问题邀请回答
收藏
登录 后发表内容