QQ Music WeChat Mini Program Example Code-Mini Program Development-php.cn

QQ Music WeChat Mini Program Example Code

高洛峰

Release： 2017-03-20 15:16:49

Original

7277 people have browsed it

I want to make a fully functional WeChat applet similar to QQ Music. The demo is here for your reference, including music search, music list and playback stop.
Sample code:

QQ Music WeChat Mini Program Example Code

var util = require(&#39;../../utils/util.js&#39;)

var app = getApp()

Page({
    data: {
        playingSong: {},
        songUrl: &#39;&#39;,
        songImg: &#39;&#39;,
        songState: {
            progress: 0,
            currentPosition: &#39;00:00&#39;,
            duration: &#39;00:00&#39;
        },
        isPlaying: true,
        lyric: &#39;&#39;
    },
    onLoad: function(){
        console.log(&#39;playsong onLoad&#39;);

        let that = this;
        let songdata = app.globalData.songData;
         
        that.setData({
            playingSong: songdata,
            songUrl: &#39;http://ws.stream.qqmusic.qq.com/C100&#39; + songdata.songmid + &#39;.m4a?fromtag=38&#39;,
            songImg: &#39;http://y.gtimg.cn/music/photo_new/T002R150x150M000&#39; + songdata.albummid + &#39;.jpg&#39;,
        });

        let thatData = that.data;
        wx.playBackgroundAudio({
            dataUrl: thatData.songUrl,
            title: thatData.playingSong.songname,
            coverImgUrl: thatData.songImg,
            success: function(res){
                //do something
            }
        });
    },
    onReady: function(){
        console.log(&#39;playsong onReady&#39;);
        let that = this;
        that.songPlay();

        wx.onBackgroundAudioPlay(function(){
            console.log(&#39;播放了&#39;);
            that.songPlay();
        });
    },
    timeToString: function(duration){
        let str = &#39;&#39;;
        let minute = parseInt(duration/60) < 10 ? (&#39;0&#39;+ parseInt(duration/60)) : (parseInt(duration/60));
        let second = duration%60 < 10 ? (&#39;0&#39;+duration%60) : (duration%60);
        str = minute+&#39;:&#39;+second;
        return str;
    },
    songPlay: function(){
        let that = this;
        let inv = setInterval(function(){
            wx.getBackgroundAudioPlayerState({
                success: function(res){
                    if(res.status == 1){
                        that.setData({
                            isPlaying: true,
                            songState: {
                                progress: res.currentPosition/res.duration*100,
                                currentPosition: that.timeToString(res.currentPosition),
                                duration: that.timeToString(res.duration)
                            }
                        })
                    }else{
                        that.setData({
                            isPlaying: false
                        });
                        clearInterval(inv);
                    }
                }
            });
        }, 1000);
    },
    songToggle: function(){
        let that = this;

        if(that.data.isPlaying){
            wx.pauseBackgroundAudio();
        }else{
            wx.playBackgroundAudio({
                title: that.data.playingSong.songname,
                coverImgUrl: that.data.songImg
            });
        };

        that.songPlay();
    }
})

Copy after login

The above is the detailed content of QQ Music WeChat Mini Program Example Code. For more information, please follow other related articles on the PHP Chinese website!