使用vue制作一个属于自己的音乐播放器

个人博客原文地址(支持代码预览) /baymaxsjj

前言

其中在想在博客中添加音乐播放功能的时候，也考虑也其它音乐播放器插件如APlayer,页面和功能都能满足要求。而且播放页面也很好看，功能几乎都有。但是我不需要那么多功能，所以我自己尝试制作一个属于自己博客的音乐播放器。页面布局及样式参考APlayer

案例预览（点击预览云墨白-音乐播放器）

                <el-row   : >
                    <el-col :md="24"  >
                        <!--  -->
                        <!-- 音乐图片 -->

                            <el-avatar   :size="66" shape="square" :src="https://www.miaokee.com/2808274.html">
                                <i  ></i>
                                <!--  -->
                            </el-avatar>

                        <!-- 展开模块 -->

                                    <!-- 音乐列表模块 -->

                                        <el-scrollbar  >

                                                        {<!-- -->{ind+1}}
                                                        {<!-- -->{}}

                                                    {<!-- -->{}}

                                        </el-scrollbar>

                                <!-- 标题 作者 -->

                                    {<!-- -->{musics[index].title}}
                                    ---
                                    {<!-- -->{musics[index].name}}

                                <!--暂停 快进   -->

                                <!-- 音乐拖动条 时间 -->

                                        <el-slider   tooltip-  :format-tooltip="transTime" @change="getVal()" input-size="mini" :min="0" :max="max" v-model="numb"></el-slider>
                                        <!-- <input    v-model="numb" type="range" min="0" :max="max" @input="getVal()"  :style="{background: '-webkit-linear-gradient(top, var(--main-5), var(--main-5)) 0% 0% / '+ numb*100/max +'% 100% no-repeat'}"/> -->
                                        {<!-- -->{newTime}}
                                        /
                                        {<!-- -->{time}}

                                    <!-- 循环播放  -->

                        <!-- 扩展栏 -->

                            <i :class="muIsShow?'el-icon-arrow-left':'el-icon-arrow-right'"></i>

                    </el-col>
                </el-row>

了解audio

html标签

Your browser does not support the audio element.

属性

属性值描述 autoplay autoplay 如果出现该属性，则音频在就绪后马上播放。 controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。 loop loop 如果出现该属性，则每当音频结束时重新开始播放。 muted muted 规定视频输出应该被静音。 preload preload 如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。 src url 要播放的音频的 URL。

内容来源—W3School

js创建（本案例使用）
//创建audio,不会在页面中显示。
var audio=document.createElement("audio");
//设置src,播放地址。
audio.src ='http://url'

事件

属性值描述 oncanplay script 当文件就绪可以开始播放时运行的脚本（缓冲已足够开始时）。 oncanplaythrough script 当媒介能够无需因缓冲而停止即可播放至结尾时运行的脚本。 onended script 当媒介已到达结尾时运行的脚本（可发送类似“感谢观看”之类的消息 onpause script 当媒介被用户或程序暂停时运行的脚本。 onplay script 当媒介已就绪可以开始播放时运行的脚本。 onplaying script 当媒介已开始播放时运行的脚本。 onprogress script 当浏览器正在获取媒介数据时运行的脚本。 ontimeupdate script 当播放位置改变时（比如当用户快进到媒介中一个不同的位置时）运行的脚本。

内容来源—W3School

案例准备

格式化时间
// 获取音乐总时长
getTime() {
let time = ;
= time;
//总共时长的秒数
= (time);
},
// 时间格式化位00：00
formatTime(value) {
let time = "";
let s = (":");
let i = 0;
for (; i < - 1; i++) {
time += s[i].length == 1 ? "0" + s[i] : s[i];
time += ":";
}
time += s[i].length == 1 ? "0" + s[i] : s[i];
return time;
},
// 把毫秒变成时分秒
transTime(value) {
let time = "";
let h = parseInt(value / 3600);
value %= 3600;
let m = parseInt(value / 60);
let s = parseInt(value % 60);
if (h > 0) {
time = (h + ":" + m + ":" + s);
} else {
time = (m + ":" + s);
}
return time;
},

创建及绑定事件
created() {
// 创建Audio
= ("audio");
();
let that = this;
// 当音乐准备就绪时的操作
(
"canplay",
function () {
("加载成功");
();
= true;
//防止自动播放
if () {
(); // 播放
= true;
}
();
// ()
},
false
),
//快进时的操作，同步时间
(
"timeupdate",
function () {
= ;
= ();
},
false
);
//当音乐播放到结束后的操作，
(
"ended",
function () {
if ( == 0) {
(); // 暂停
= false;
} else if ( == 1) {
(); // 播放
= true;
} else {
== - 1 ? 0 : + 1;
}
},
false
);
},

播放暂停、快进
// 播放暂停
pause() {
if ( !== null && ) {
= true;
if () {
(); // 播放
= true;
} else {
(); // 暂停
= false;
("暂停被调用了");
}
} else {
this.$message({
showClose: true,
message: "音乐还没有加载成功呢！",
type: "warning",
});
}
},
// 快进音乐
getVal() {
if (! || != 0) {
= ;
if ( == ()) {
();
= false;
}
}
},