21.music-歌曲播放

歌曲播放
1.点击歌曲v-on
2.歌曲地址获取(axios/歌曲id)
3.歌曲地址设置(v-bind)
4.Audio标籤
当我们点击播放时，audio里的src会改变
-播放歌曲->设置歌曲地址
-切换歌曲->更换不同src
-歌曲地址从街口获取

歌曲url获取接口(以下为黑马程序员课程提供)
-请求地址:https://autumnfish.cn/song/url
-请求方法:get
-请求参数:id(歌曲id)
-响应内容:歌曲url地址

Playmusic:歌曲ID是在搜索歌曲时返回的数据里面，因此我们要从里面去拿取

之后当我们点击歌曲后我们就会传入歌曲ID，不同歌曲有不同的ID

拿到ID后我们就要去调接口(axios.get)

点击后我们可以在得到的数据里看到一个data，点开之后，我们要找歌曲地址

接着记得要存取misicUrl的时候不可以直接用this，所以我们要先用that储存
var that=this;
that.musicUrl=response.data.data[0].url; 这样就存入misicUrl了
之后用v-bind设定:src="musicUrl" 就可以成功播放音乐了

 playMusic(musicId){              //console.log(musicId);             var that=this;              axios.get("https://autumnfish.cn/song/url?id="+musicId)              .then(function(response){                console.log(response.data.data[0].url)                that.musicUrl=response.data.data[0].url; //储存歌曲地址              },function(err){              })          }

 <div class="audio_con">        <audio ref='audio' :src="musicUrl" controls autoplay loop class="myaudio"></audio>    <!-- 音乐播放--></div>

参考资料:
https://www.bilibili.com/video/BV1HE411e7vY/?p=32&share_source=copy_web&vd_source=85a8c5bb37dc77d30860d2b3537de967