图例：

搜索和正在播放：

正在播放

窗口歌词：

列表功能：

视频展示：

自编原因：

EuiAdmin之前的音乐播放器是基于vue-aplayer实现的音乐播放功能，也基本实现了列表、播放暂停控制等功能，但经使用发现此JavaScript库在自定义上不够深，无法快速完成自定义。

在音乐播放时无法将歌词进行全面展示，仅支持小歌词模式，交互能力有限；所以我决定自己写一个音乐播放器。

实现原理：

通过使用html标签

EuiAdmin音乐播放器实现原理：

通过将音乐播放器做成一个组件，在搜索界面加载音乐组件，通过将搜索结果与EiAdmin的api获取音乐链接，然后将数据通过组件传参的形式将（歌手、音乐名称、音乐链接、音乐展示图片和音乐歌词”数组”）传递给音乐组件；然后将值赋给的响应api然后实现音乐播放等控制。

流程图：

实现数据的控制和传递，要了解音乐播放器你的了解组件传值。

搜索功能实现：

export default {

components: {

MusicSpace: (resolve) => {

require([“@/components/apply/mymusic/MusicSpace”], resolve);

},

},

data() {

return {

search_value: “”,

music_list: [],

music_play_data: {

music_name: “”,

music_artist: “”,

music_url: “”,

music_pic: undefined,

music_lrc: [],

},

page_data: {

page_size: 10,

current_page: 1,

page_total: 0,

},

music_data: [],

};

},

methods: {

play_music(index) {

this.$axios({

method: “post”,

url: “/music/play”,

data: this.$qs.stringify({

music_id: this.music_data.abslist[index].MUSICRID,

}),

}).then((response) => {

this.music_play_data = {

music_name: this.music_data.abslist[index].SONGNAME,

music_artist: this.music_data.abslist[index].ARTIST,

music_url: response.data.music_url,

music_pic: this.music_data.abslist[index].hts_MVPIC,

music_lrc: response.data.lrc_data,

};

});

},

add_music_list(index) {

this.$axios({

method: “post”,

url: “/music/play”,

data: this.$qs.stringify({

music_id: this.music_data.abslist[index].MUSICRID,

}),

}).then((response) => {

this.music_list = {

music_name: this.music_data.abslist[index].SONGNAME,

music_artist: this.music_data.abslist[index].ARTIST,

music_url: response.data.music_url,

music_pic: this.music_data.abslist[index].hts_MVPIC,

music_lrc: response.data.lrc_data,

};

});

},

page_size_change(page_size) {

this.page_data.page_size = page_size;

this.$message.success(“每页显示” page_size “条数据”);

this.search_music();

},

current_change(click_page) {

this.page_data.current_page = click_page;

this.$message.success(“正在展示第” click_page “页数据”);

this.search_music();

},

search_music() {

this.$axios({

method: “post”,

url: “/music/search”,

data: this.$qs.stringify({

search_value: this.search_value,

page_size: this.page_data.page_size,

current_page: this.page_data.current_page,

}),

}).then((response) => {

var json = eval(“(” response.data “)”);

this.music_data = json;

this.page_data.page_total = parseInt(json.TOTAL);

});

},

},

};

音乐播放页：

音乐播放和暂停

play(state) {//音乐播放传递state（true/false）控制播放和暂停

if (

this.format_date(this.play_time_data.music_duration_time) == “0:00:00”

) {

this.$message.warning(“未选择音乐”);

return false;

}

if (state) {

this.play_state = state;

this.$refs.audio.play();

this.play_class =

“animate__animated animate__flipOutY animate__slow animate__infinite infinite”;

} else {

this.play_state = state;

this.$refs.audio.pause();

this.play_class = “”;

}

},

获取音乐时长

musci_time_length() {

this.play_time_data.music_duration_time = this.$refs.audio.duration;

},

获取音乐已播放时长

music_played_time(res) {

this.play_time_data.music_current_time = res.target.currentTime;

}

音乐滑动控制

change_music_play_time(time) {

this.play_time = time;

this.$refs.audio.currentTime =

(this.play_time / 100) * this.play_time_data.music_duration_time;

},

修改播放速度

change_rate() {

this.play_rate = 0.5;

if (this.play_rate > 2) {

this.play_rate = 0.5;

}

this.$refs.audio.playbackRate = this.play_rate;

},

音乐播放结束触发

music_play_end() {

this.play(false);

this.$message.warning(“播放结束”);

this.play_end_state = this.music;

},

时间格式化

format_date(second) {

var secondType = typeof second;

if (secondType === “number” || secondType === “string”) {

second = parseInt(second);

var hours = Math.floor(second / 3600);

second = second – hours * 3600;

var mimute = Math.floor(second / 60);

second = second – mimute * 60;

return (

hours

“:”

(“0” mimute).slice(-2)

“:”

(“0” second).slice(-2)

);

} else {

return “0:00:00”;

}

},

歌词组件

export default {

props: [“lrc”, “played_time”],

data() {

return {

music_play_title: “EuiAdmin自写音乐服务”,

dialog_state: false,

index: 0,

lrc_time: 0.0,

text: “EuiAdmin暂无歌词”,

};

},

methods: {

get_lrc(time) {

if (time == 0) {

this.index = 0;

this.text = this.lrc[this.index].lineLyric;

this.lrc_time = this.lrc[this.index].time;

} else if (time > this.lrc_time && time > this.lrc[this.index 1].time) {

this.index = 1;

this.text = this.lrc[this.index].lineLyric;

this.lrc_time = this.lrc[this.index].time;

}

// console.log(this.text)

},

},

watch: {

played_time(val) {

let played_lrc_time = Number(val.toFixed(2));

this.get_lrc(played_lrc_time);

},

},

};

音乐列表组件实现：

添加歌曲到列表：

点击列表播放实现：

点击删除：

播放完毕自动下一曲：

目前仍存在的问题：1、拖动音乐时歌词会出现”追赶”现象。

2、上下一曲未实现。

结语：

喜欢可以点击（关注、评论、转发三联一波），如您还是不太明白可以前往euiadmin.com获取源码进行查看，搜索页面位于”src/components/apply/music/ MusicSpace.vue”,播放组件位于”src/components/apply/mymusic”文件夹下。