Vue实现仿音乐播放器11-实现访问百度音乐API实现播放音乐功能

迷南。 2023-10-18 12:38 45阅读 0赞

### 场景 ###

从今日推荐页面点击某首歌曲会将这首歌曲的songid通过路由传递到播放界面，

播放界面调用百度音乐接口实现数据的获取以及音乐的播放。

## 效果 ##

![2018121321393563.gif][]![Image 1][]

## 实现 ##

### 配置路由 ###

首先在pages目录下新建musicplay.vue作为音乐播放的页面，

然后在router下的index.js中中配置路由。

routes: [
        {
          path:"/musicplay",
          name:"MusicPlay",
          component:MusicPlay
        },

来到今日推荐页面，配置页面跳转

跳转到音乐播放组件并将当前音乐的songid通过路由参数传递过去。

<div class="scroller">
                    <router-link tag="div" :to="{name:'MusicPlay',params:{songid:item.song_id}}" class="card url" v-for="(item,index) in todayRecommend" :key="index">
                        <div class="album">
                            <img :src="item.pic_big" :alt="item.title">
                            <div class="name">{
       { item.title }}</div>
                        </div>
                    </router-link>
     </div>

同理将其他页面，要实现播放的页面组件也配置跳转到音乐播放组件，并将要播放的音乐组件的songid传递过去。

### 实现音乐播放界面 ###

百度音乐API播放说明：

例：method=baidu.ting.song.play&songid=877578

例：method=baidu.ting.song.playAAC&songid=877578

参数：songid = 877578 //歌曲id

注：关于使用file\_link不能播放的问题，是因为百度使用Http中的Referer头字段来防止盗链，在HTML文件中

加上 <meta name=”referrer” content=”never”>这一句让发送出去的Http包都不含Referer字段

来到musicplay.vue

#### CSS样式 ####

#### 页面布局 ####

#### 实现歌词滚动功能 ####

在components目录下新建LRC.vue

<template lang="html">
      <div class="lrcContainer">
        <div class="lrc" ref="lrc">
          {
       { getAllKey }}
          <p
            class="lrc-p"
            :class="{active:parseInt(currentTime) >= keyArr[index] && parseInt(currentTime) < keyArr[index+1]}"
            v-for="(item,key,index) in lrcData"
            :key="index">
            {
       { item }}{
       { srcollLrc(key,index) }}
          </p>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name:"lrc",
      data(){
        return{
          lrc:{},
          lrcData:{},
          keyArr:[]
        }
      },
      props:{
        songid:{
          type:[String,Number],
          default:""
        },
        currentTime:{
          type:[String,Number],
          default:0
        },
        durationTime:{
          type:[String,Number],
          default:0
        }
      },
      mounted(){
        const LRCUrl = this.HOST+"/v1/restserver/ting?method=baidu.ting.song.lry&songid="+this.songid;
        this.$axios.get(LRCUrl)
         .then(res => {
           this.lrc = res.data
           // 数据格式处理
           var lyrics = res.data.lrcContent.split("\n");
            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;
         })
         .catch(error => {
           console.log(error);
         })
      },
      computed:{
        getAllKey(){
          for(var i in this.lrcData){
            this.keyArr.push(i);
          }
        }
      },
      methods:{
        srcollLrc(key,index){
          const lrcDiv = this.$refs.lrc
           if(key < this.currentTime && key > this.currentTime - (this.keyArr[index+1] - this.keyArr[index])){
               lrcDiv.style.top = -((index-2)*30)+"px"
           }
        }
      }
    }
    </script>
    
    <style scoped>
    
    .lrcContainer{
      width: 100%;
      height: 150px;
      overflow: hidden;
      position: relative;
    }
    
    .lrc{
     width: 100%;
      position: absolute;
      top: 0;
    }
    .active{
      color: red !important;
    }
    .lrc-p{
      height: 30px;
     line-height: 30px;
    }
    
    .up30{
     margin-top: -30px;
    }
    
    
    </style>

在musicplay.vue显示歌词滚动

在musicplay.vue异步操作

// 异步操作
    const LRC = Vue.component("lrc",(resolve)=>require(["../components/LRC"],resolve))
    
    添加监听
    
      methods:{
        addEventListeners(){
          this.$refs.player.addEventListener('timeupdate', this._currentTime),
          this.$refs.player.addEventListener('canplay', this._durationTime)
         },
         removeEventListeners: function () {
           this.$refs.player.removeEventListener('timeupdate', this._currentTime)
           this.$refs.player.removeEventListener('canplay', this._durationTime)
         },
        _currentTime(){
          this.currentTime = this.$refs.player.currentTime
          // currentTime是audio标签提供的获取当前播放时间的方法
        },
       _durationTime(){
        this.durationTime = this.$refs.player.duration
        // duration是audio标签提供的获得歌曲播放整体时间的方法
        }
      }

#### 实现下载功能 ####

百度音乐API下载说明：

例：method=baidu.ting.song.downWeb&songid=877578&bit=24&\_t=1393123213

参数： songid = 877578//歌曲id

bit = 24, 64, 128, 192, 256, 320 ,flac//码率

\_t = 1430215999,, //时间戳

我们在请求百度音乐的API后输出返回的数据可以看到

歌曲的链接为：

返回数据下的bitrate下的show\_link

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]![Image 1][]

所以我们几将audio的src属性设为

所以我们点击播放组件的右边的三个点，选择下载，就可以实现下载了。

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1][]

#### 完整musicplay.vue代码 ####

<template lang="html">
      <div class="play">
        <div class="header">
         <div class="title">
           <router-link to="/">
             <i class="iconfont icon-shouye left"></i>
           </router-link>
           <div class="music-info">
             <p>{
       { currentUrl.songinfo.title }}</p>
             <p class="author">{
       { currentUrl.songinfo.author }}</p>
           </div>
           <router-link to="/search"><i class="iconfont icon-sousuo right"></i></router-link>
         </div>
       </div>
    
       <div class="song-info">
       <div class="song-info-img">
            <img :src="currentUrl.songinfo.pic_big">
            <LRC :durationTime="durationTime" :currentTime="currentTime" :songid="this.$route.params.songid"/>
       </div>
       <div class="iconbox">
        <i class="iconfont icon-shoucang2 left"></i>
        <i class="box"></i>
        <i class="iconfont icon-xiazai right"></i>
       </div>
      </div>
        <div class="song">
          <audio ref="player" :src="currentUrl.bitrate.show_link" controls autoplay></audio>
      </div>
    
      </div>
    </template>
    
    <script>
    
    import Vue from "vue"
    import "../assets/font/iconfont.css"
    // import LRC from "../components/LRC"
    // 异步操作
    const LRC = Vue.component("lrc",(resolve)=>require(["../components/LRC"],resolve))
    
    export default {
      name:"musicplay",
      data(){
        return{
          currentUrl:{
            songinfo:{
              title:"",
              author:""
            },
            bitrate:{
              show_link:""
            }
          },
          currentTime:0,
          durationTime:0
        }
      },
      components:{
        LRC
      },
      mounted(){
        const playUrl = this.HOST+"/v1/restserver/ting?method=baidu.ting.song.play&songid=" + this.$route.params.songid;
        this.$axios.get(playUrl)
          .then(res => {
            this.currentUrl = res.data;
          })
          .catch(error => {
            console.log(error);
          })
        this.addEventListeners();
      },
      beforeDestroyed(){
        this.removeEventListeners();
      },
      methods:{
        addEventListeners(){
          this.$refs.player.addEventListener('timeupdate', this._currentTime),
          this.$refs.player.addEventListener('canplay', this._durationTime)
         },
         removeEventListeners: function () {
           this.$refs.player.removeEventListener('timeupdate', this._currentTime)
           this.$refs.player.removeEventListener('canplay', this._durationTime)
         },
        _currentTime(){
          this.currentTime = this.$refs.player.currentTime
          // currentTime是audio标签提供的获取当前播放时间的方法
        },
       _durationTime(){
        this.durationTime = this.$refs.player.duration
        // duration是audio标签提供的获得歌曲播放整体时间的方法
        }
      }
    
    }
    </script>
    
    <style scoped>
    
    
    .header{
     padding:15px;
    }
    
    .music-info{
     flex: 1;
     font-size: 20px;
    }
    
    .title{
     display: flex;
     text-align: center;
    }
    
    .left{
     font-size: 30px;
    }
    
    .ca{
      color: red;
    }
    
    .right{
     font-size: 30px;
    }
    
    .song-info{
     padding: 15px;
    }
    
    .song-info-img{
     text-align: center;
    }
    
    .song-info-img img{
     width: 50%;
     border-radius: 5px;
     box-shadow: 0 0 10px 0 rgba(50,50,50,.31);
    }
    
    .song-lrc{
     margin-top: 10px;
      min-height: 50px;
    }
    
    .iconbox{
     display: flex;
     margin-top: 30px;
    }
    
    .iconbox .box{
     flex: 1;
    }
    
    .song{
     width: 100%;
     text-align: center;
    }
    
    .song audio{
     width: 80%;
    }
    
    .active{
      color: #222;
    }
    
    .author{
      font-size: 12px;
      color: #999;
    }
    
    </style>

## 解决Referrer Policy: no-referrer-when-downgrade ##

### 场景 ###

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 2][]

### 原因 ###

百度使用Http中的Referer头字段来防止盗链，在HTML文件中加上 <meta name=”referrer” content=”never”>这一句让发送出去的Http包都不含Referer字段就行了

#### 解决 ####

找到index.html

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 3][]

加入

注意双引号是英文状态

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 4][]

此部分代码对应分阶段代码中阶段八

分阶段代码下载位置：

[https://download.csdn.net/download/badao\_liumang\_qizhi/10846557][https_download.csdn.net_download_badao_liumang_qizhi_10846557]

![Image 1][]

[2018121321393563.gif]: https://img-blog.csdnimg.cn/2018121321393563.gif
[Image 1]: 
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20181213214316252.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20181213214157585.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20181213214334788.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20181213214339442.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20181213214350664.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[https_download.csdn.net_download_badao_liumang_qizhi_10846557]: https://download.csdn.net/download/badao_liumang_qizhi/10846557