更新记录
1.1.0(2021-04-16) 下载此版本
同步到youzack小程序的最新版中的组件
1.0.0(2021-02-24) 下载此版本
2021-02-24 发布
平台兼容性
Vue2 | Vue3 |
---|---|
√ | × |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
app-vue app-nvue | √ | √ | √ | √ | √ | √ |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | √ | √ | √ |
基本使用方式:
<yz-audio ref="player1">
</yz-audio>
在代码中播放以及设置名字、海报图片等:
var player1 = this.$refs.player1; player1.setSrc(
"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3");
player1.setPoster("https://vkceyugu.cdn.bspapp.com/VKCEYUGU-uni-app-doc/7fbf26a0-4f4a-11eb-b680-7980c8a877b8.png");//海报图片
player1.setSinger("贝多芬");//设置歌手
player1.setName("致爱丽丝");//设置作品名字
方法说明:
方法名称 | 参数 | 说明 |
---|---|---|
setSrc | value:string类型,音频文件Url | 设置要播放的音频文件 |
setPoster | value: string类型,海报图片Url | 设置要要显示的海报图片(显示到播放按钮下) |
setName | value: string类型,作品名 | 设置作品名 |
setSinger | value: string类型,歌手名 | 设置歌手名 |
stop | 无 | 停止播放 |
seek | t:number类型,进度(秒) | 跳转到第t秒播放 |
play | 无 | 播放 |
pause | 无 | 暂停播放 |
playbackRate | value:number类型,倍速 | 设置播放倍速,具体可选值请参考Uni-App文档里uni.createVideoContext的playbackRate方法。 |
需要特别注意:playbackRate方法不能在play/setSrc之前或者之后立即调用,否则只有很少几率会成功。如果需要在play/setSrc后调用,最好延时调用playbackRate。
播放器提供了三个文本区域供用户使用,可以在这三个文本区域中显示自定义内容,也可以响应它们的点击事件从而把它们当成按钮使用。也可以使用slot设置自定义UI。
属性说明:
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
isButton1Visible | boolean | false | 按钮1是否可见 |
button1Text | string | 按钮1的文本 | |
isButton2Visible | boolean | false | 按钮2是否可见 |
button2Text | string | 按钮2的文本 | |
isButton3Visible | boolean | false | 按钮3是否可见 |
button3Text | string | 按钮3的文本 |
有三个事件“Button1Click、Button2Click、Button3Click”,当三个按钮点击的时候就会分别触发。
例子代码:
<yz-audio ref="player1" button1Text="按钮1" button2Text="按钮2" button3Text="按钮3"
isButton1Visible="true" isButton2Visible="true" isButton3Visible="true" @Button1Click="btn1Click">
</yz-audio>
如果这三个文本无法满足要求,也可以使用名字为extraCtrls的插槽来自定义这块的UI,如下:
<yz-audio ref="player1">
<template v-slot:extraCtrls>
<uni-icons type="camera"></uni-icons>
<text>youzack.com</text>
</template>
</yz-audio>
事件说明:
名称 | 参数 | 说明 |
---|---|---|
Button1Click | 无 | 按钮1被点击 |
Button2Click | 无 | 按钮2被点击 |
Button3Click | 无 | 按钮3被点击 |
play | 无 | 开始播放 |
pause | 无 | 暂停 |
ended | 无 | 结束播放 |
timeUpdate | {currentTime, duration},来自于video控件的timeUpdate事件参数的detail属性值。播放进度变化时触发, error 错误对象 | 视频播放出错时触发 |
注意事项:
- 只有video组件支持倍速播放,所以这个组件是采用的video来播放音频,因此支持的音频文件格式取决于video组件的支持情况;
- 由于VideoContext的内部实现的未知原因,不能在play方法之前或者之后立即调用playbackRate来修改倍速,否则很可能不会生效。最好由用户触发的动作来调用playbackRate,如果必须在play方法前后调用,建议通过setTimeout设置一个延时来执行playbackRate。
比如如下是不行的:
var player1 = this.$refs.player1;
player1.setSrc("https://www.test.com/test.mp3");
player1.playbackRate(0.5);
可以如下修改:
var player1 = this.$refs.player1;
player1.setSrc("https://www.test.com/test.mp3");
setTimeout(function(){player1.playbackRate(0.5);},500);
- 由于组件是使用video来播放音频,因此具有video的所有缺点,比如不能实现后台播放。我曾经想换用getBackgroundAudioManager()来替换video,但是发现BackgroundAudioManager响应速度很慢,无法实现精细、及时的进度控制。
- 如果需要音频的锁屏播放,可以在需要后台播放的时候(需要用户操作触发),暂停yz-audio的播放,然后再调用getBackgroundAudioManager实现后台播放。
- 如果仔细观察播放器,你可能会发现右上角有一个小黑点,那个其实就是一个尺寸非常小的video组件。但是这个video组件不能完全隐藏,否则在ios下将会无法播放。
- 由于播放器属于个性化需求非常强的组件,众口难调,因此这个组件很难完全满足所有人的要求,因此这个组件我只是开放源代码,各位可以根据自己的需要修改,我将不会进行后续维护、新需求增加等。