[移动开发]微信小程序实现自定义音乐播放

实现关键：

1、wx.getBackgroundAudioManager()?

2、在app.json中配置："requiredBackgroundModes": ["audio"]

具体实现步骤：

wxml

<view class="playBox">
        <!--  -->
        <image mode="aspectFill"  class="playbg {{isPlay&&'disc-animate'}}" src="{{ detailObj.playerdiagram }}"></image>
        <image mode="aspectFill" src="{{  isPlay ? 'https://laikangland-dev.oss-cn-beijing.aliyuncs.com/202209081030199l40.png?Expires=2293324220&OSSAccessKeyId=LTAIykCrXSP1fmei&Signature=Tc7RjNRt7VnPQdFxPgtob76AVE0%3D' : 'https://laikangland-dev.oss-cn-beijing.aliyuncs.com/20220908103053X31u.png?Expires=2293324253&OSSAccessKeyId=LTAIykCrXSP1fmei&Signature=eIFRbPEqzCCtptvNtb3Y3VJER%2Bg%3D' }}" data-src="{{ detailObj.resUrl }}" class="play" catchtap="playMusic"></image>
    </view>

less?

 .playBox {
        width: 484rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 484rpx;
        border-radius: 50%;
        margin-bottom: 140rpx;
        position: relative;
        overflow: hidden;
        border: 8rpx solid #F1CAAD;

        .playbg {
            width: 100%;
            height: 100%;
            top: 0rpx;
            left: 0rpx;
            position: absolute;
            transform: rotate(0deg)
        }

        .disc-animate {
            animation: rotate 3s 0s linear infinite;
        }

        .play {
            width: 96rpx;
            height: 96rpx;
            z-index: 1000;
            border-radius: 50%;
        }
    }
// 动画
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

js

1、在onLoad中创建播放对象

data: {
        detailObj: null,
        isPlay: false,//是否播放
},
onLoad(options) {
        let detailObj = JSON.parse(decodeURIComponent(options.item))
        this.data.audioCtx = wx.getBackgroundAudioManager()
        this.data.audioCtx.title = detailObj.name
},

2、将播放的步骤封装成一个方法

注意事项：

1、代码中的src为需要播放的地址

2、为了防止中文的地址在ios中无法播放，需要对其通过encodeURIComponent进行转码处理

3、必须设置title，否则无法播放

createPlay() {
        let src = this.data.detailObj.resUrl
        src = src.slice(0,src.indexOf('ai-algorithm-nlp')+6) + encodeURIComponent(src.slice(src.indexOf('ai-algorithm-nlp') + 6 ));
        console.log("src11",this.data.detailObj.resUrl)
        this.data.audioCtx.src = src
        // this.data.audioCtx.src = 'https://video.laikang.com/cadd1f7577ab40ccbcb329064f3e2a27/8438975ae4284db78b8b3cd5b2315c1b-f7b7209e26969e4c379364564e3d8923-ld.mp4'
        // console.log("src11",src)
        if(app.globalData.tabIndex || app.globalData.tabIndex == 0) {
            this.setData({ isPlay: true,tabIndex:app.globalData.tabIndex })
        }
        // this.data.audioCtx.pause()
        setTimeout(() => {
            this.data.audioCtx.play()
        },300)
        // 监听音乐播放
        this.data.audioCtx.onPlay(() => {
            this.handleList(true)
            this.setData({ isPlay: true })
        })
        // 监听音乐暂停
        this.data.audioCtx.onPause(() => {
            this.handleList(false)
            this.setData({ isPlay: false })
        })
        // 监听音乐停止
        this.data.audioCtx.onStop(() => {
            this.handleList(false)
            this.setData({ isPlay: false })
        })
        // 监听音乐结束
        this.data.audioCtx.onEnded(() => {
            console.log("音乐结束")
            // 循环播放
            this.data.audioCtx.pause()
            this.data.audioCtx.play()
        })
        // 监听播放进度
        this.data.audioCtx.onTimeUpdate(() => {
            let fmtCurrentTime = moment(this.data.audioCtx.currentTime * 1000).format("mm");
            let tabIndex =  this.data.tabIndex
            // console.log("tabIndex",tabIndex)
            let time = this.data.tab[tabIndex]
            app.globalData.tabIndex = tabIndex
            if(Number(fmtCurrentTime) >= time) {
                // 定时结束
                console.log("定时结束")
                this.setData({isPlay:false})
                this.data.audioCtx.stop()
            }
        })
        if(this.data.detailObj.isPlay) {
            this.data.audioCtx.src = this.data.detailObj.resUrl
            // this.data.audioCtx.pause()
            this.data.audioCtx.play()
            this.setData({ isPlay: true })
        }
    },

3、在onShow中进行调用??（确保每次进来音频都可播放）

onShow() {
       
  this.createPlay()
},

4、处理播放按钮点击时对应的事件

playMusic(e) {
        console.log("this.data.isPlay",this.data.isPlay)
        this.setData({ isPlay: !this.data.isPlay })
        let src = e.currentTarget.dataset.src
        src = src.slice(0,src.indexOf('ai-algorithm-nlp')+6) + encodeURIComponent(src.slice(src.indexOf('ai-algorithm-nlp') + 6 ));
        this.data.audioCtx.src = src
        // this.data.audioCtx.src = 'https://video.laikang.com/68514b723d30472ba691c9b91b529631/4b8b9e29983c41848d01e173a115bc68-a186ac753c224d0a3647598c3ba3aab6-ld.mp4'
        if (this.data.isPlay) {
            this.data.audioCtx.pause()
            this.data.audioCtx.play()

        } else {
            this.setData({ isPlay: false })
            this.data.audioCtx.pause()
        }

    },