QQ音乐微信小程序实例代码

高洛峰
Lepaskan: 2017-03-20 15:16:49
asal
7222 orang telah melayarinya

想做一个功能齐全的类似QQ音乐的微信小程序,demo来了,可供大家参考,包含音乐搜索、音乐列表及播放停止
示例代码:

QQ图片20170320144615.png

var util = require('../../utils/util.js')

var app = getApp()

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

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

        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('playsong onReady');
        let that = this;
        that.songPlay();

        wx.onBackgroundAudioPlay(function(){
            console.log('播放了');
            that.songPlay();
        });
    },
    timeToString: function(duration){
        let str = '';
        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();
    }
})
Salin selepas log masuk


Atas ialah kandungan terperinci QQ音乐微信小程序实例代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!