微信小程序 26 播放音乐页的完善②

最新推荐文章于 2024-07-05 10:55:33 发布

牟泉禹[Dark Cat]

最新推荐文章于 2024-07-05 10:55:33 发布

阅读量288

点赞数

分类专栏：学习笔记文章标签：微信小程序 javascript 前端

BY-牟泉禹/MuQuanyu

本文链接：https://blog.csdn.net/qq_52606908/article/details/125904188

版权

学习笔记专栏收录该内容

387 篇文章 11 订阅

订阅专栏

26.1 实现下一首上一首

接口： http://localhost:3000/song/detail?ids=347230 获得音乐的详情，这样的话我们只要拿到 musicId 就可以拿到这首歌的所有信息了。

封装一个获取歌曲并且更新歌曲信息的方法

// 获取到单个音乐的详情
    async getMusicDetail(musicId) {
        //http://localhost:3000/song/detail?ids=347230
        let data = await request("song/detail", {ids: musicId});
        let song = data.songs[0];
        this.setData({
            song
        })
    },

直接去调用相关方法就能实现功能了。我们的方法其实都已经写好了。

    // 点击切歌的回调
    handleSwitch(event){

        // 1. PubSubJS 的实现方法
        // 获取切歌的类型
        let type = event.currentTarget.id;
        PubSub.publish('switchType', type);
        PubSub.subscribe('musicId', (msg, musicId) => {
            this.setData({
                isPlay:  true
            });
            this.getMusicDetail(musicId);
            this.musicControl(this.data.isPlay,musicId);
        });
    },

26.2 静态搭建播放进度条

<view class="songDetailContainer">
    <view class="author">{{song.ar[0].name}}</view>
    <view class="circle"></view>
    <image class="needle {{isPlay? 'needleRotate':''}}" src="/static/images/song/needle.png"></image>

    <view class="discContainer {{isPlay? 'discRotate':''}}" >
        <image class="disc" src="/static/images/song/disc.png"></image>
        <image class="musicImg" src="{{song.al.picUrl}}"></image>
    </view>
<!--进度条控制区域-->
    <view class="progressControl">
        <text>00:00</text>
        <!--总进度条-->
        <view class="barControl">
            <!--实时进度条-->
            <view class="audio-currentTime-Bar">
                <!--小圆球-->
                <view class="audio-circle"></view>
            </view>
        </view>
        <text>03:00</text>
    </view>

<!--底部控制播放区域-->
    <view class="musicControl">
        <text class="iconfont icon-zhongbo"></text>
        <text id="pre" class="iconfont icon-shangyishoushangyige" bindtap="handleSwitch"></text>
        <text class="iconfont {{isPlay? 'icon-zanting':'icon-bofang'}} big" bindtap="handleMusicPlay"></text>
        <text id="next" class="iconfont icon-xiayigexiayishou" bindtap="handleSwitch"></text>
        <text class="iconfont icon-24gl-playlistMusic5"></text>
    </view>
</view>

/*进度条控制区域*/
.progressControl {
    width: 640rpx;
    height: 80rpx;
    line-height: 80rpx;
    line-height: 80rpx;
    padding-bottom: 200rpx;
    display: flex;

}

.barControl {
    position: relative;
    width: 450rpx;
    height: 4rpx;
    background: rgba(0,0,0,0.4);
    margin: auto;
}

.audio-currentTime-Bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100rpx;
    z-index: 1;
    height: 4rpx;
    background: red;
}

/*小圆球*/
.audio-circle {
    position: absolute;
    right: -12rpx;
    top: -5rpx;
    width: 12rpx;
    height: 12rpx;
    border-radius: 50%;
    background: #fff;
}

26.3 动态显示进度条相关内容

动态显示时间

<!--进度条控制区域-->
    <view class="progressControl">
        <text>{{curretTime}}</text>
        <!--总进度条-->
        <view class="barControl">
            <!--实时进度条-->
            <view class="audio-currentTime-Bar">
                <!--小圆球-->
                <view class="audio-circle"></view>
            </view>
        </view>
        <text>{{durationTime}}</text>
    </view>

使用第三方日期处理类库 Moment.js

在这里插入图片描述

封装一个获取播放总长度时间的函数

 // 获取到播放的时间
    getTime(song){
        let durationTime = moment(song.dt).format('mm:ss');
        this.setData({
            durationTime
        })
    },

添加一个更新监听

        // 音乐管理者实时播放的进度
        appInstance.globalData.backgroundAudioManager.onTimeUpdate(() => {
            let currentTime = moment(appInstance.globalData.backgroundAudioManager.currentTime * 1000).format('mm:ss');
            if(this.data.isPlay && this.data.song.id == this.data.preMusicId){
                this.setData({
                    currentTime
                });
            }
        });

最后的js 代码（包含修复之前的播放问题。可以用这个代码。）

// pages/songDetail/songDetail.js
import request from "../../utils/request";
import PubSub from "pubsub-js";
import moment from 'moment';
const appInstance = getApp();
Page({

    /**
     * 页面的初始数据
     */
    data: {
        isPlay: false, // 标识音乐是否播放
        song: {},
        preMusicId: "", // 之前播放的音乐 ID
        currentTime: "00:00", // 实时时间
        durationTime: "00:00" // 总时长
    },

    // 点击切歌的回调
    handleSwitch(event){

        // 1. PubSubJS 的实现方法
        // 获取切歌的类型
        let type = event.currentTarget.id;
        PubSub.publish('switchType', type);
        PubSub.subscribe('musicId', (msg, musicId) => {
            this.setData({
                isPlay:  true
            });
            this.getMusicDetail(musicId);
            this.musicControl(this.data.isPlay,musicId);
        });
    },

    // 获取到单个音乐的详情
    async getMusicDetail(musicId) {
        //http://localhost:3000/song/detail?ids=347230
        let data = await request("song/detail", {ids: musicId});
        let song = data.songs[0];

        // 获取到播放的总时间
        this.getTime(song);

        this.setData({
            song
        })
    },

    // 获取到播放的总时间
    getTime(song){
        let durationTime = moment(song.dt).format('mm:ss');
        this.setData({
            durationTime
        })
    },


    // 点击播放/暂停的 回调函数
    handleMusicPlay(){
        this.setData({
            isPlay:!this.data.isPlay
        });
        this.musicControl(this.data.isPlay,this.data.song.id)
    },

    // 控制音乐播放/暂停的 功能函数
    async musicControl(isPlay, musicId) {
        console.log(musicId + "||" + this.data.preMusicId);
        if (isPlay) {// 音乐开始播放
            if(this.data.preMusicId == musicId || musicId == appInstance.globalData.musicID){
                appInstance.globalData.backgroundAudioManager.play();
            }else{
                // 获取音乐播放链接
                appInstance.globalData.backgroundAudioManager.stop();
                let musicLinkData = await request('song/url', {id: musicId});
                appInstance.globalData.backgroundAudioManager.title = this.data.song.name;
                appInstance.globalData.backgroundAudioManager.src = musicLinkData.data[0].url;
            }

        } else {// 暂停播放
            appInstance.globalData.backgroundAudioManager.pause();
        }
        this.setData({
            preMusicId: musicId
        })
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        //获取事件对象
        let that = this;
        const eventChannel = this.getOpenerEventChannel();
        eventChannel.on('song', function(data) {
            that.setData({
                song: data
            })
        });

        // 获取到播放的总时间
        this.getTime(this.data.song);

        wx.setNavigationBarTitle({
            title: this.data.song.name
        });

        if(appInstance.globalData.isMusicPlay && this.data.song.id === appInstance.globalData.musicID){
            this.handleMusicPlay();
        }

        // 音乐管理者播放监听
        appInstance.globalData.backgroundAudioManager = wx.getBackgroundAudioManager();
        appInstance.globalData.backgroundAudioManager.onPlay(() => {
            this.setData({
                isPlay: true
            });
            appInstance.globalData.musicID = this.data.preMusicId;
            appInstance.globalData.isMusicPlay = true;
        });
        // 音乐管理者暂停监听
        appInstance.globalData.backgroundAudioManager.onPause(() => {
            this.setData({
                isPlay: false
            })
            appInstance.globalData.musicID = this.data.preMusicId;
            appInstance.globalData.isMusicPlay = true;
        });
        // 音乐管理者停止监听
        appInstance.globalData.backgroundAudioManager.onStop(() => {
            this.setData({
                isPlay: false
            })
            appInstance.globalData.musicID = this.data.preMusicId;
            appInstance.globalData.isMusicPlay = false;
        });
        // 音乐管理者实时播放的进度
        appInstance.globalData.backgroundAudioManager.onTimeUpdate(() => {
            let currentTime = moment(appInstance.globalData.backgroundAudioManager.currentTime * 1000).format('mm:ss');
            if(this.data.isPlay && this.data.song.id == this.data.preMusicId){
                this.setData({
                    currentTime
                });
            }
        });

    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    }
})