VueMusic-9.播放-播放功能

1.添加路由

{
path:‘/musicplay‘,
name:"MusicPlay",
component:MusicPlay
}

2.实例

<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">
{{this.$route.params.songid}}
<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>

VueMusic-9.播放-播放功能

原文：https://www.cnblogs.com/xiao-peng-ji/p/11438744.html