weixin_57909439 2022-09-05 23:07 采纳率: 85%
浏览 14
已结题

小程序制作音乐 ,在点击下一首的时候,下一首的歌没有声音了,图片可以动,歌词也改变了

在点击下一首的时候,下一首的歌没有声音了,图片可以动,歌词也改变了

img


Page({

    /**
     * 页面的初始数据
     */
    data: {
        action:{
            "method":"play"
        },
        thisMusicId:"",
        musicName:"",
        musicImg:"",
        lyric:[],
        lycindex:-1,
        top:0,
        url:"",
        playtime:"00:00",
        alltime:"00:00",
        max:0,
        move:0,
        idlist:[]
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad:function(options) {
        var mid = options.id
        var id_list = options.idlist
        // 把传过来的字符串进行拆分
        id_list = id_list.split(",")
        // id赋值
        this.setData({
            thisMusicId:mid,
            idlist:id_list
        })
        this.musicshow()
        this.musicLyric()
        this.vip()

    },
    // 判断是否需要会员
    vip:function(){
        var url = 'http://music.163.com/song/media/outer/url?id='+this.data.thisMusicId+'.mp3'
        var that = this
        wx.request({
            "url":url,
            success:(result) =>{
                if(result.data.includes('网易司版权所有')){
                    that.setData({
                        "url":''
                    })
                }else{
                    that.setData({
                        "url":url,
                        action:{
                            "method":"play"
                        },
                    })
                }  
            },
            
        })
    },
    // 音乐播放
    musicshow:function(){
        
        var id = this.data.thisMusicId
        // 先存储当前对象
        var that = this
        var url = "https://music.163.com/api/song/detail/?ids=["+id+"]"
        wx.request({
            "url":url,
            success:(result) =>{
                var name=result.data.songs[0].name
                var pic=result.data.songs[0].album.blurPicUrl
                that.setData({
                    "musicName":name,
                    "musicImg":pic
                })
            }
        })
    },
    // 进度条改变
    sliderchange:function(res){
        console.log(res)
        var offset = res.detail.value
        // 然后播放器值的覆盖
        this.setData({
            "move":offset
        })
        // 覆盖当前的值,然后进行audio的覆盖
        this.setData({
            action:{
                "method":"setCurrentTime",
                "data":offset
            }
        })
        // 要进行播放按钮UI覆盖
        this.setData({
            "action":{
                "method":"play"
            }
        })


    },
    // 暂定按钮
    playdata:function(){
        var data = this.data.action.method
        if (data=="play") {
            this.setData({
                action:{
                    "method":"pause"
                }
            })
        } else {
            this.setData({
                action:{
                    "method":"play"
                }
            })
        }
    },
    // 音乐歌词
    musicLyric:function(){
        var data = this.data.thisMusicId
        var that = this
        var lyric = "http://music.163.com/api/song/lyric?os=pc&id="+data+"&lv=-1&kv=-1&tv=-1"
        wx.request({
            url:lyric,
            success:(result) =>{
               var lyric_data = result.data.lrc.lyric

            //    歌词处理:
            //    进行字符串拆开,把每一句拆开
            //    进行每一句拆分时间和歌词并且存储列表
            //    进行歌词显示
            // 拆分\n
            var new_data = lyric_data.split("\n")
            // 正则 [00:00.000]
            var re = /\[\d{2}:\d{2}\.\d{2,3}\]/
            // 遍历数组"[00:00.000] 作词 : 布瑞吉Bridge/GAI周延/王鹤棣/张颜齐"
            var timelyc =[]
            for(var i=0;i<new_data.length;i++){
                if(new_data[i]!=''){
                    var time1 = new_data[i].match(re) 
                    // 时间
                    var timelist = time1[0]
                    var timelist = timelist.slice(1,-1)
                    //歌词
                    var lyrlist = new_data[i].replace(re,'') 
                    // 时间整理,以毫秒为单位
                    // 时间再次分割
                    timelist = timelist.split(":")
                    var h = timelist[0]
                    var s = timelist[1]
                    var time_new = parseFloat(h)*60+parseFloat(s)-0.5
                    //    进行每一句拆分时间和歌词并且存储列表[[00,歌词],[12,歌词]]
                    timelyc.push([time_new,lyrlist])
                    
                }
            }
               that.setData({
                lyric:timelyc,
                
            })
            }
        })
    },
    // 歌词进度
    // 匹配事件,根据当前播放的事件和播放的时间从而判断当前歌词位置然后进行高亮显示和滚动
    timechange:function(result){
        // 歌词滚动
        var playtime = result.detail.currentTime
        var lyctimelist = this.data.lyric

        // 要进行遍历比对判断
        for(var i=0;i<lyctimelist.length-1;i++){
            if(lyctimelist[i][0]<playtime&&playtime<lyctimelist[i+1][0]){
                // console.log(lyctimelist[i][1])
                this.setData({
                    lycindex:i
                })
                // console.log(this.data.lycindex+this.data.lyric[i][1])
            }
        }
        var index = this.data.lycindex
        this.setData({
            top:(index-5)*24
        })
        // 进度条的改变
        // 设置当前播放的时长
        
        // 进行当时时间的格式化
        var m = playtime/60
        m = Math.floor(m)
        var s = playtime%60
        s = Math.floor(s)
        if(m<10){
            m = '0'+m
        }
        if(s<10){
            s = '0'+s
        }
        var play_time = m+':'+s
        // 总时长
        var alltime = result.detail.duration
        var allm = alltime/60
        allm = Math.floor(allm)
        var alls = alltime%60
        alls = Math.floor(alls)
        if(allm<10){
            allm = '0'+allm
        }
        if(alls<10){
            alls = '0'+alls
        }
        var all_time=allm+":"+alls
        this.setData({
            "playtime":play_time,
            "alltime":all_time,
            "max":alltime,
            "move":playtime
            
        })
        // 判断歌曲是否播放完
        if(playtime==alltime){
            this.setData({
                "action":{
                    "method":"pause"
                }
            })
        }
    
    },

    // 下一首播放
    // 通过id进行下一首替换图片,名字,音乐
    nextmusic:function(){
        var thisid = this.data.thisMusicId
        var idlist = this.data.idlist
        var id_index = idlist.indexOf(thisid)
        var idindex = id_index+1
        var newid = idlist[idindex]
        this.setData({
            thisMusicId:idindex==idlist.length?idlist[0]:newid,
        })
        this.musicshow()
        this.musicLyric()
        this.vip()
        this.setData({
            action:{
                "method":"play"
            },
        })
    },
    // 上一首播放
    // 通过id进行下一首替换图片,名字,音乐
    prevmusic:function(){
        var thisid = this.data.thisMusicId
        var idlist = this.data.idlist
        var id_index = idlist.indexOf(thisid)
        var idindex = id_index-1
        var endid = idlist.length-1
        this.setData({
            thisMusicId:idindex<0?idlist[endid]:idlist[idindex],
        })
        this.musicshow()
        this.musicLyric()
        this.vip()     
        this.setData({
            action:{
                "method":"play"
            },
    },
  • 写回答

1条回答 默认 最新

  • 老牛源码 2022-09-06 18:22
    关注

    没有获取取歌曲的URL地址的原因,
    你可以看一下页面数据是不是这样。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 9月14日
  • 已采纳回答 9月6日
  • 修改了问题 9月6日
  • 创建了问题 9月5日

悬赏问题

  • ¥20 我想使用一些网络协议或者部分协议也行,主要想实现类似于traceroute的一定步长内的路由拓扑功能
  • ¥30 深度学习,前后端连接
  • ¥15 孟德尔随机化结果不一致
  • ¥15 apm2.8飞控罗盘bad health,加速度计校准失败
  • ¥15 求解O-S方程的特征值问题给出边界层布拉休斯平行流的中性曲线
  • ¥15 谁有desed数据集呀
  • ¥20 手写数字识别运行c仿真时,程序报错错误代码sim211-100
  • ¥15 关于#hadoop#的问题
  • ¥15 (标签-Python|关键词-socket)
  • ¥15 keil里为什么main.c定义的函数在it.c调用不了