1.1.0 • Published 5 years ago
cjhcj-audio v1.1.0
cjhcj-audio
####以下只讲解在vue-cli脚手架使用cjhcj-audio的方法
###第一步: cnpm install cjhcj-audio --save 或者用npm安装: npm install cjhcj-audio --save
###第二步: 在所需要导入的组件内导入该组件 import cjhcjAudio from 'cjhcj-audio' (导入后需要在components中注册,别忘了) components { cjhcjAudio }
###第三步直接在页面中使用
<audio autoplay id="audio"> </audio>
这是音频的格式,如果设置添加音频的属性为loop的话,下方的songEnded方法是无法监听到的,如果去掉autoplay属性的话,给歌曲设置src属性的值时,需要手动调用音频的play方法,音频才会播放
<cjhcjAudio :audio='audio' :audioCss='audioCss' @getTime = 'getTime' @songEnded='songEnded' />
这个组件绑定了两个props属性和两个方法
audio是你页面的音频标签的实例
这里以jQuery获取为例
切记页面元素加载后能够获取音频实例
$(function() {
audio = $('#audio)[0]
})
audioCss属性可以设置滚动条和滑块的样式, audioCss每一个属性都对应一个css类
初始设置是, 大家可以设置各种各样的样式,但是最好不要设置滚动条的宽度,高度的话是可以设置的,滑块的大小是通过width和height设置的,宽度和高度要一样,这样才可以是圆的,因为这样会有bug,
使用该播放器的时候最好把他包含在一个有高度和宽度的盒子里,该播放器会与盒子的宽度百分百适应
audioCss = {
lineContainer: {
height: '4px',
backgroundColor: 'pink'
},//进度容器的高度和颜色
point: {
width: '12px',
height: '12px',
backgroundColor: 'green'
},//进度条滑动点的大小和颜色
preloadBar: {
backgroundColor: 'purple'
},//预加载的进度条的颜色
currentTimeBar: {
backgroundColor: 'red'
},//滚动进度条的颜色
}
getTime方法可以获取音频实时播放的描述 //这里需要有音频播放的时候才会获取的,音频无法播放 是没办法触发该方法的
getTime(time) {
console.log(time);//{curTime: 4.175408, duration: 236.016327}
//curTime : 表示音频正在播放的时间点, duration: 表示该音频的时长
//以上两个时间都是以秒为单位
}
songEnded方法可以监听到歌曲播放结束,如果歌曲播放结束后会触发该事件
songEnded() {
//doSomething
}