这个音频组件项目是vue2.x的一个功能非常简单的音频组件插件,可以自定义播放器样式,也可以很方便的进行功能扩展
在做vue2.x的项目的时候,发现没有合适的音频播放器的插件可以使用,而且h5自带的音频控制器没办法修改样式.
vue2里面的全家桶UI库也没有音频组件可以很好的使用.虽然muse-ui全家桶里面的slider可以作为音频的时间线进行使用,但是和我项目的UI库貌似有冲突.
所以自己封装了一个简单版本的,我自己的项目是足够使用了
控件里面上一首和下一首没有做事件,我的项目这两个按键是上一页和下一页.所以就没写了
播放器的滑动条参考了别人的代码,然后自己修改了点点,使用上可以点击位置调到音频时间点,也可以拖动位置调到音频时间点.
可以看下预览图:
使用方式:
1.安装插件
npm install vue2audiocomponent --save-dev
2.使用插件
import audioCompName from 'audioPlayerComponent'
Vue.use(audioCompName);
3.在组件中使用方式
<template>
<div>
<audioCompName :audioList = 'audioList'></audioCompName>
</div>
</template>
4.插件需要传递的参数
data() {
return {
audioList:{
//音频组件地址,只能传递一个,如果需要传递多个,可以自己修改源码 换成数组或者json
url:"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
//这个音频文件的长度,因为一般都是异步获取到音频地址才能初始化audio的,所以这个参数父传递给子合适点
totalTime:null,
}
}
}
5.我项目的尺寸是720的设计稿 使用了一半大小, 360的分辨率去做的,如果觉得可用,请给个star哦
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 50 * (clientWidth / 360) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);