利用Element+vue自己构建一个美丽的音乐播放器

图例:

搜索和正在播放:

使用Element vue自己构建一个美丽的音乐播放器

正在播放

使用Element vue自己构建一个美丽的音乐播放器

窗口歌词:

使用Element vue自己构建一个美丽的音乐播放器

列表功能:

使用Element vue自己构建一个美丽的音乐播放器

视频展示:

自编原因:

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

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

实现原理:

通过使用html标签

使用Element vue自己构建一个美丽的音乐播放器

EuiAdmin音乐播放器实现原理:

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

流程图:

使用Element vue自己构建一个美丽的音乐播放器

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

搜索功能实现:

EuiAdmin音乐

<el-button

size=”small”

type=”danger”

@click=”search_music()”

icon=”el-icon-search”

style=”float: right”

>搜索

>

<el-input

v-model=”search_value”

placeholder=”请输入音乐相关信息”

@change=”search_music()”

size=”small”

style=”float: right; width: 200px”

>

 

 

<i

class=”el-icon-video-play”

@click=”play_music(scope.$index, scope.row)”

style=”font-size: 150%; color: #409eff; cursor: pointer”

/>

<i

class=”el-icon-plus”

@click=”add_music_list(scope.$index, scope.row)”

style=”

font-size: 150%;

color: #f56c6c;

margin-left: 10px;

cursor: pointer;

/>

 

 

 

 

 

 

 

<el-table-column

prop=”PLAYCNT”

label=”播放次数”

width=”100″

>

 

<el-pagination

@size-change=”page_size_change”

@current-change=”current_change”

:current-page=”page_data.current_page”

:page-sizes=”[10, 20, 50, 100, 200, 500]”

:page-size=”page_data.page_size”

layout=”total, sizes, prev, pager, next, jumper”

:total=”page_data.page_total”

style=”margin-top: 10px”

>

 

 

 

 

 

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”;

}

},

歌词组件

{{ text }}

{{ music_play_title }}

 

{{ up.lineLyric }}

 

{{ text }}

{{ lr.lineLyric }}

 

 

 

 

 

 

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”文件夹下。

内容出处:,

声明:本网站所收集的部分公开资料来源于互联网,转载的目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品,请与我们取得联系,我们会及时修改或删除。文章链接:http://www.yixao.com/procedure/12636.html

发表评论

登录后才能评论