Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 5995
Star 90
Fork 162
H
hello uni-app x
提交 88d0be0e 编写于 作者: M mahaifeng
浏览文件
操作

[audio] 新增示例

上级 8d730359
显示空白变更内容
内联 并排
Showing with 290 addition and 241 deletion
pages/API/create-inner-audio-context/create-inner-audio-context.uvue
浏览文件 @ 88d0be0e
......@@ -16,14 +16,27 @@
<text class="uni-text-box">音频缓冲的时间点：{{buffered}}</text>
<text class="uni-text-box">当前音量：{{volume}}</text>
<!-- 设置音量无效 -->
<!-- <button plain :disabled="volume == 1" @click="increaseVolume">增加音量</button>
<button plain :disabled="volume == 0" @click="decreaseVolume">减少音量</button> -->
<button plain :disabled="volume == 1" @click="increaseVolume">增加音量</button>
<button plain :disabled="volume == 0" @click="decreaseVolume">减少音量</button>
<text class="uni-subtitle-text uni-title">开始播放的位置（单位：s）</text>
<input :value="startTime" type="number" placeholder="开始播放的位置（单位：s）" class="uni-input"
@input="startTimeInput"></input>
<boolean-data :defaultValue="false" title="是否自动开始播放" @change="setAutoplay"></boolean-data>
<boolean-data :defaultValue="false" title="是否循环播放" @change="setLoop"></boolean-data>
<text class="uni-subtitle-text uni-title"
style="padding-left: 10px;padding-top: 10px;padding-right: 10px;">播放倍率</text>
<radio-group class="uni-flex uni-row radio-group" @change="playbackRateChange"
style="flex-wrap: wrap;padding: 10px;">
<radio value="0.5" style="margin-right: 3px">0.5
</radio>
<radio value="0.8" style="margin-right: 3px">0.8</radio>
<radio value="1.0" style="margin-right: 3px" :checked="playbackRateChecked">1.0</radio>
<radio value="1.25" style="margin-right: 3px">1.25</radio>
<radio value="1.5" style="margin-right: 3px">1.5</radio>
<radio value="2.0">2.0</radio>
</radio-group>
<view class="uni-title">
<text class="uni-title-text">方法示例</text>
</View>
......@@ -31,6 +44,14 @@
<button :disabled="!isPlaying" type="primary" @click="pause" class="uni-btn">暂停</button>
<button :disabled="!isPlaying && !isPaused" type="primary" @click="stop" class="uni-btn">停止</button>
<button type="primary" @click="onchangeValue(20)" class="uni-btn">跳转到指定位置20</button>
<button type="primary" @click="onTimeUpdate" class="uni-btn">onTimeUpdate</button>
<button type="primary" @click="offTimeUpdate" class="uni-btn">offTimeUpdate</button>
<button type="primary" @click="onWaiting" class="uni-btn">onWaiting</button>
<button type="primary" @click="offWaiting" class="uni-btn">offWaiting</button>
<text style="color: red;font-size: 15px;margin-top: 10px;">tip:销毁后请重新进入此界面再播放</text>
<button type="primary" @click="destory" class="uni-btn">销毁</button>
<view class="uni-title">
<text class="uni-title-text">格式/路径示例</text>
......@@ -66,7 +87,10 @@
// 自动化测试
onSeekingTest: false,
onSeekedTest: false,
onWaitingTest: false
onWaitingTest: false,
playbackRateChecked: true,
onTimeUpdateCb: (res : any) => { },
onWaitingCb: (res : any) => { }
}
},
computed: {
......@@ -79,6 +103,30 @@
this._audioContext!.src = audioUrl;
this.volume = this._audioContext!.volume;
this.onCanplay()
this._audioContext!.onPlay(() => {
this.isPaused = false;
this.isPlaying = true;
console.log('开始播放', this.isPaused);
});
this.onTimeUpdateCb = (res : any) => {
if (this._isChanging) { return; }
this.currentTime = this._audioContext!.currentTime;
console.log('onTimeUpdateCb', this.currentTime)
if (this.currentTime > this.buffered) {
console.log('缓冲不足');
}
};
this.onWaitingCb = (res : any) => {
console.log('音频加载中事件');
this.onWaitingTest = true
}
this.onTimeUpdate()
// this.onWaiting()
this.onError()
this.onEnded()
},
onUnload() {
if (this._audioContext != null && this.isPlaying) {
......@@ -107,7 +155,7 @@
this.onSeeked()
this._isChanging = false;
},
onchangeValue(pos:number) {
onchangeValue(pos : number) {
this._audioContext!.seek(pos);
this.onSeeking()
this.onSeeked()
......@@ -139,14 +187,6 @@
if (this._audioContext!.startTime > 0) {
this.onchangeValue(this._audioContext!.startTime)
}
this._audioContext!.onPlay(() => {
this.isPaused = false;
console.log('开始播放', this.isPaused);
});
this.onTimeUpdate()
this.onWaiting()
this.onError()
this.onEnded()
},
onSeeking() {
this._audioContext!.onSeeking(() => {
......@@ -161,31 +201,28 @@
});
},
onWaiting() {
this._audioContext!.onWaiting(() => {
console.log('音频加载中事件');
this.onWaitingTest = true
});
this._audioContext!.onWaiting(this.onWaitingCb);
},
offWaiting() {
this._audioContext!.offWaiting(this.onWaitingCb);
},
onTimeUpdate() {
this._audioContext!.onTimeUpdate(() => {
// console.log('onTimeUpdate:音频播放进度更新事件,currentTime',this._audioContext!.currentTime);
if (this._isChanging) { return; }
this.currentTime = this._audioContext!.currentTime
console.log('currentTime', this.currentTime);
if (this.currentTime > this.buffered) {
console.log('缓冲不足');
}
});
this._audioContext!.onTimeUpdate(this.onTimeUpdateCb);
},
offTimeUpdate() {
this._audioContext!.offTimeUpdate(this.onTimeUpdateCb);
},
increaseVolume() {
this.volume = Math.min(this.volume + 0.1, 1);
this.volume = parseFloat(this.volume.toFixed(1));
this._audioContext!.volume = this.volume
console.log('增加音量', this.volume);
},
decreaseVolume() {
this.volume = Math.max(this.volume - 0.1, 0);
this.volume = parseFloat(this.volume.toFixed(1));
console.log('减少音量', this.volume);
this._audioContext!.volume = this.volume
},
onEnded() {
this._audioContext!.onEnded(() => {
......@@ -222,7 +259,19 @@
});
this.isPlaying = false;
console.log('stop', this.isPaused);
},
destory() {
if (this._audioContext != null) {
this.isPlaying = false;
this._audioContext!.destroy()
}
},
playbackRateChange(e : UniRadioGroupChangeEvent) {
if (this._audioContext != null && this.isPlaying) {
console.log(parseFloat(e.detail.value))
this._audioContext!.playbackRate = parseFloat(e.detail.value)
}
},
}
}
</script>
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或