Skip to content

H
hello uni-app x

DCloud / hello uni-app x

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

[audio] 新增示例

上级 16ae7d43
隐藏空白更改
内联 并排
Showing with 290 addition and 241 deletion
pages/API/create-inner-audio-context/create-inner-audio-context.uvue
浏览文件 @ 6dd5e1fe
<template> <template>
<!-- #ifdef APP --> <!-- #ifdef APP -->
<scroll-view style="flex: 1;"> <scroll-view style="flex: 1;">
<!-- #endif --> <!-- #endif -->
<view class="uni-padding-wrap"> <view class="uni-padding-wrap">
<page-head title="audio"></page-head> <page-head title="audio"></page-head>
<view class="uni-common-mt"> <view class="uni-common-mt">
<slider :value="position" :min="0" :max="duration" @changing="onchanging" @change="onchange"></slider> <slider :value="position" :min="0" :max="duration" @changing="onchanging" @change="onchange"></slider>
</view> </view>
<view class="uni-title"> <view class="uni-title">
<text class="uni-title-text">属性示例</text> <text class="uni-title-text">属性示例</text>
</View> </View>
<text class="uni-text-box uni-common-mt">当前音频播放位置（保留小数点后 6 位）：{{currentTime}} s</text> <text class="uni-text-box uni-common-mt">当前音频播放位置（保留小数点后 6 位）：{{currentTime}} s</text>
<text class="uni-text-box">音频的长度（单位:s）：{{duration}} s</text> <text class="uni-text-box">音频的长度（单位:s）：{{duration}} s</text>
<text class="uni-text-box">当前是否停止状态：{{isPaused}}</text> <text class="uni-text-box">当前是否停止状态：{{isPaused}}</text>
<text class="uni-text-box">音频缓冲的时间点：{{buffered}}</text> <text class="uni-text-box">音频缓冲的时间点：{{buffered}}</text>
<text class="uni-text-box">当前音量：{{volume}}</text> <text class="uni-text-box">当前音量：{{volume}}</text>
<!-- 设置音量无效 --> <!-- 设置音量无效 -->
<!-- <button plain :disabled="volume == 1" @click="increaseVolume">增加音量</button> <button plain :disabled="volume == 1" @click="increaseVolume">增加音量</button>
<button plain :disabled="volume == 0" @click="decreaseVolume">减少音量</button> --> <button plain :disabled="volume == 0" @click="decreaseVolume">减少音量</button>
<text class="uni-subtitle-text uni-title">开始播放的位置（单位：s）</text> <text class="uni-subtitle-text uni-title">开始播放的位置（单位：s）</text>
<input :value="startTime" type="number" placeholder="开始播放的位置（单位：s）" class="uni-input" <input :value="startTime" type="number" placeholder="开始播放的位置（单位：s）" class="uni-input"
@input="startTimeInput"></input> @input="startTimeInput"></input>
<boolean-data :defaultValue="false" title="是否自动开始播放" @change="setAutoplay"></boolean-data> <boolean-data :defaultValue="false" title="是否自动开始播放" @change="setAutoplay"></boolean-data>
<boolean-data :defaultValue="false" title="是否循环播放" @change="setLoop"></boolean-data> <boolean-data :defaultValue="false" title="是否循环播放" @change="setLoop"></boolean-data>
<view class="uni-title"> <text class="uni-subtitle-text uni-title"
<text class="uni-title-text">方法示例</text> style="padding-left: 10px;padding-top: 10px;padding-right: 10px;">播放倍率</text>
</View> <radio-group class="uni-flex uni-row radio-group" @change="playbackRateChange"
<button :disabled="isPlaying" type="primary" @click="play" class="uni-btn">播放</button> style="flex-wrap: wrap;padding: 10px;">
<button :disabled="!isPlaying" type="primary" @click="pause" class="uni-btn">暂停</button> <radio value="0.5" style="margin-right: 3px">0.5
<button :disabled="!isPlaying && !isPaused" type="primary" @click="stop" class="uni-btn">停止</button> </radio>
<button type="primary" @click="onchangeValue(20)" class="uni-btn">跳转到指定位置20</button> <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"> <view class="uni-title">
<text class="uni-title-text">格式/路径示例</text> <text class="uni-title-text">方法示例</text>
</View> </View>
<navigator url="/pages/API/create-inner-audio-context/inner-audio-format" class="uni-btn"> <button :disabled="isPlaying" type="primary" @click="play" class="uni-btn">播放</button>
<button type="primary" @click="pause">音频格式示例</button> <button :disabled="!isPlaying" type="primary" @click="pause" class="uni-btn">暂停</button>
</navigator> <button :disabled="!isPlaying && !isPaused" type="primary" @click="stop" class="uni-btn">停止</button>
<navigator url="/pages/API/create-inner-audio-context/inner-audio-path" class="uni-btn uni-common-mb"> <button type="primary" @click="onchangeValue(20)" class="uni-btn">跳转到指定位置20</button>
<button type="primary" @click="pause">音频路径示例</button> <button type="primary" @click="onTimeUpdate" class="uni-btn">onTimeUpdate</button>
</navigator> <button type="primary" @click="offTimeUpdate" class="uni-btn">offTimeUpdate</button>
</view> <button type="primary" @click="onWaiting" class="uni-btn">onWaiting</button>
<!-- #ifdef APP --> <button type="primary" @click="offWaiting" class="uni-btn">offWaiting</button>
</scroll-view>
<!-- #endif -->
<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>
</View>
<navigator url="/pages/API/create-inner-audio-context/inner-audio-format" class="uni-btn">
<button type="primary" @click="pause">音频格式示例</button>
</navigator>
<navigator url="/pages/API/create-inner-audio-context/inner-audio-path" class="uni-btn uni-common-mb">
<button type="primary" @click="pause">音频路径示例</button>
</navigator>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template> </template>
<script lang="uts"> <script lang="uts">
const audioUrl = 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3' const audioUrl = 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3'
export default { export default {
data() { data() {
return { return {
title: "innerAudioContext", title: "innerAudioContext",
currentTime: 0, currentTime: 0,
duration: 100, duration: 100,
startTime: 0, startTime: 0,
buffered: 0, buffered: 0,
volume: 0.5, volume: 0.5,
isCanplay: false, isCanplay: false,
isPlaying: false, isPlaying: false,
isPaused: true, isPaused: true,
isPlayEnd: false, isPlayEnd: false,
_isChanging: false, _isChanging: false,
_audioContext: null as InnerAudioContext | null, _audioContext: null as InnerAudioContext | null,
// 自动化测试 // 自动化测试
onSeekingTest: false, onSeekingTest: false,
onSeekedTest: false, onSeekedTest: false,
onWaitingTest: false onWaitingTest: false,
} playbackRateChecked: true,
}, onTimeUpdateCb: (res : any) => { },
computed: { onWaitingCb: (res : any) => { }
position() { }
return this.isPlayEnd ? 0 : this.currentTime; },
}, computed: {
}, position() {
onReady() { return this.isPlayEnd ? 0 : this.currentTime;
this._audioContext = uni.createInnerAudioContext(); },
this._audioContext!.src = audioUrl; },
this.volume = this._audioContext!.volume; onReady() {
this.onCanplay() this._audioContext = uni.createInnerAudioContext();
}, this._audioContext!.src = audioUrl;
onUnload() { this.volume = this._audioContext!.volume;
if (this._audioContext != null && this.isPlaying) { this.onCanplay()
this.stop(); this._audioContext!.onPlay(() => {
this._audioContext!.destroy() this.isPaused = false;
} this.isPlaying = true;
}, console.log('开始播放', this.isPaused);
methods: { });
onCanplay() {
this._audioContext!.onCanplay(() => { this.onTimeUpdateCb = (res : any) => {
console.log('音频进入可以播放状态事件'); if (this._isChanging) { return; }
this.isCanplay = true; this.currentTime = this._audioContext!.currentTime;
// 当音频可以播放时，获取缓冲信息 console.log('onTimeUpdateCb', this.currentTime)
this.buffered = this._audioContext!.buffered; if (this.currentTime > this.buffered) {
this.duration = this._audioContext!.duration console.log('缓冲不足');
}); }
}, };
onchanging() {
this._isChanging = true; this.onWaitingCb = (res : any) => {
}, console.log('音频加载中事件');
onchange(e : UniSliderChangeEvent) { this.onWaitingTest = true
console.log(e, 'e'); }
let pos = e.detail.value;
this._audioContext!.seek(pos); this.onTimeUpdate()
this.onSeeking() // this.onWaiting()
this.onSeeked() this.onError()
this._isChanging = false; this.onEnded()
}, },
onchangeValue(pos:number) { onUnload() {
this._audioContext!.seek(pos); if (this._audioContext != null && this.isPlaying) {
this.onSeeking() this.stop();
this.onSeeked() this._audioContext!.destroy()
this._isChanging = false; }
}, },
startTimeInput(e : InputEvent) { methods: {
let startTimeValue = parseInt(e.detail.value) onCanplay() {
this._audioContext!.startTime = startTimeValue; this._audioContext!.onCanplay(() => {
this.onchangeValue(startTimeValue) console.log('音频进入可以播放状态事件');
}, this.isCanplay = true;
setAutoplay() { // 当音频可以播放时，获取缓冲信息
this._audioContext!.autoplay = !this._audioContext!.autoplay; this.buffered = this._audioContext!.buffered;
console.log(this._audioContext!.autoplay, 'autoplay'); this.duration = this._audioContext!.duration
}, });
setLoop() { },
this._audioContext!.loop = !this._audioContext!.loop; onchanging() {
console.log(this._audioContext!.loop, 'loop'); this._isChanging = true;
}, },
play() { onchange(e : UniSliderChangeEvent) {
if (!this.isCanplay) { console.log(e, 'e');
uni.showToast({ let pos = e.detail.value;
title: '音频未进入可以播放状态，请稍后再试' this._audioContext!.seek(pos);
}); this.onSeeking()
return; this.onSeeked()
} this._isChanging = false;
this.isPlaying = true; },
this._audioContext!.play(); onchangeValue(pos : number) {
this.isPlayEnd = false; this._audioContext!.seek(pos);
if (this._audioContext!.startTime > 0) { this.onSeeking()
this.onchangeValue(this._audioContext!.startTime) this.onSeeked()
} this._isChanging = false;
this._audioContext!.onPlay(() => { },
this.isPaused = false; startTimeInput(e : InputEvent) {
console.log('开始播放', this.isPaused); let startTimeValue = parseInt(e.detail.value)
}); this._audioContext!.startTime = startTimeValue;
this.onTimeUpdate() this.onchangeValue(startTimeValue)
this.onWaiting() },
this.onError() setAutoplay() {
this.onEnded() this._audioContext!.autoplay = !this._audioContext!.autoplay;
}, console.log(this._audioContext!.autoplay, 'autoplay');
onSeeking() { },
this._audioContext!.onSeeking(() => { setLoop() {
console.log('音频进行 seek 操作事件'); this._audioContext!.loop = !this._audioContext!.loop;
this.onSeekingTest = true console.log(this._audioContext!.loop, 'loop');
}); },
}, play() {
onSeeked() { if (!this.isCanplay) {
this._audioContext!.onSeeked(() => { uni.showToast({
console.log('音频完成 seek 操作事件'); title: '音频未进入可以播放状态，请稍后再试'
this.onSeekedTest = true });
}); return;
}, }
onWaiting() { this.isPlaying = true;
this._audioContext!.onWaiting(() => { this._audioContext!.play();
console.log('音频加载中事件'); this.isPlayEnd = false;
this.onWaitingTest = true if (this._audioContext!.startTime > 0) {
}); this.onchangeValue(this._audioContext!.startTime)
}, }
onTimeUpdate() { },
this._audioContext!.onTimeUpdate(() => { onSeeking() {
// console.log('onTimeUpdate:音频播放进度更新事件,currentTime',this._audioContext!.currentTime); this._audioContext!.onSeeking(() => {
if (this._isChanging) { return; } console.log('音频进行 seek 操作事件');
this.currentTime = this._audioContext!.currentTime this.onSeekingTest = true
console.log('currentTime', this.currentTime); });
if (this.currentTime > this.buffered) { },
console.log('缓冲不足'); onSeeked() {
} this._audioContext!.onSeeked(() => {
}); console.log('音频完成 seek 操作事件');
}, this.onSeekedTest = true
increaseVolume() { });
this.volume = Math.min(this.volume + 0.1, 1); },
this.volume = parseFloat(this.volume.toFixed(1)); onWaiting() {
console.log('增加音量', this.volume); this._audioContext!.onWaiting(this.onWaitingCb);
}, },
decreaseVolume() { offWaiting() {
this.volume = Math.max(this.volume - 0.1, 0); this._audioContext!.offWaiting(this.onWaitingCb);
this.volume = parseFloat(this.volume.toFixed(1)); },
console.log('减少音量', this.volume); onTimeUpdate() {
}, this._audioContext!.onTimeUpdate(this.onTimeUpdateCb);
onEnded() { },
this._audioContext!.onEnded(() => { offTimeUpdate() {
console.log('播放结束'); this._audioContext!.offTimeUpdate(this.onTimeUpdateCb);
this.currentTime = 0; },
this.startTime = 0 increaseVolume() {
this.isPlaying = false; this.volume = Math.min(this.volume + 0.1, 1);
this.isPaused = true; this.volume = parseFloat(this.volume.toFixed(1));
this.isPlayEnd = true; this._audioContext!.volume = this.volume
}); console.log('增加音量', this.volume);
}, },
onError() { decreaseVolume() {
this._audioContext!.onError((err) => { this.volume = Math.max(this.volume - 0.1, 0);
console.log('err', err); this.volume = parseFloat(this.volume.toFixed(1));
this.isPlaying = false; console.log('减少音量', this.volume);
this.isPaused = true; this._audioContext!.volume = this.volume
}); },
}, onEnded() {
pause() { this._audioContext!.onEnded(() => {
this._audioContext!.pause(); console.log('播放结束');
this._audioContext!.onPause(() => { this.currentTime = 0;
console.log('音频暂停事件'); this.startTime = 0
this.isPaused = true; this.isPlaying = false;
}); this.isPaused = true;
this.isPlaying = false; this.isPlayEnd = true;
}, });
stop() { },
console.log('stop'); onError() {
this._audioContext!.stop(); this._audioContext!.onError((err) => {
this._audioContext!.onStop(() => { console.log('err', err);
// 第一次点停止时，不触发 this.isPlaying = false;
this.isPaused = true; this.isPaused = true;
console.log('音频停止事件'); });
}); },
this.isPlaying = false; pause() {
console.log('stop', this.isPaused); this._audioContext!.pause();
} this._audioContext!.onPause(() => {
} console.log('音频暂停事件');
} this.isPaused = true;
});
this.isPlaying = false;
},
stop() {
console.log('stop');
this._audioContext!.stop();
this._audioContext!.onStop(() => {
// 第一次点停止时，不触发
this.isPaused = true;
console.log('音频停止事件');
});
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> </script>
<style> <style>
.play-time-area { .play-time-area {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
margin-top: 20px; margin-top: 20px;
} }
.duration { .duration {
margin-left: auto; margin-left: auto;
} }
.play-button-area { .play-button-area {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
margin: 50px 0; margin: 50px 0;
} }
.icon-play { .icon-play {
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
</style> </style>
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或