zoukankan      html  css  js  c++  java
  • VueMusic-10.播放-歌词加载

    1.歌词新建组件

    <template>
    <div>
    歌词{{this.$route.params.songid}}
    <p class="lrc-p"
    v-for="(item,key,index) in lrcData"
    :key="index">
    {{ item }}
    </p>
    </div>
    </template>

    <script>
    export default {
    name: "LRC",
    data() {
    return {
    lrc:{},
    lrcData:{}
    }
    },
    props: {
    songid: {
    type: [String, Number],
    default: ""
    }
    },

    mounted() {
    const LRCUrl = this.HOST + "/v1/restserver/ting?method=baidu.ting.song.lry&songid=" + this.songid;
    this.$axios.get(LRCUrl).then(res=> {
    console.log(res.data)
    this.lrc=res.data;
    // 数据格式处理
    var lyrics = res.data.lrcContent.split(" ");
    var lrcObj = {};
    for(var i = 0 ;i<lyrics.length;i++){
    var lyric = decodeURIComponent(lyrics[i]);
    var timeReg = /[d*:d*((.|:)d*)*]/g;
    var timeRegExpArr = lyric.match(timeReg);
    if(!timeRegExpArr)continue;
    var clause = lyric.replace(timeReg,'');
    for(var k = 0,h = timeRegExpArr.length;k < h;k++) {
    var t = timeRegExpArr[k];
    var min = Number(String(t.match(/[d*/i)).slice(1)),
    sec = Number(String(t.match(/:d*/i)).slice(1));
    var time = min * 60 + sec;
    lrcObj[time] = clause;
    }
    }
    this.lrcData = lrcObj;
    console.log( this.lrcData )

    }).catch(error=>{
    console.log(error)
    })
    }
    }
    </script>

    <style scoped>
    </style>

  • 相关阅读:
    python基础(1)#1,2,3,4可组成多少不重复的三位数
    HTML/CSS 学习笔记
    (转) 杨元:CSS浮动(float,clear)通俗讲解
    前端:HTML
    Servlet
    Maven 安装
    单例模式
    项目随笔
    树状结构--迭代
    DB的封装
  • 原文地址:https://www.cnblogs.com/xiao-peng-ji/p/11438920.html
Copyright © 2011-2022 走看看