Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 6006
Star 91
Fork 164
H
hello uni-app x
提交 d2fa0006 编写于 作者: WOSHIMAHAIFENG's avatar WOSHIMAHAIFENG
浏览文件
操作

Merge branch 'dev_audio' into 'dev' 

[audio]添加音频示例

See merge request !49
上级 937b99f0 5e179b7c
隐藏空白更改
内联 并排
Showing with 608 addition and 394 deletion
pages.json
浏览文件 @ d2fa0006
...@@ -1097,7 +1097,16 @@ ...@@ -1097,7 +1097,16 @@
} }
}, },
// #endif // #endif
// #ifdef WEB || MP // // #ifdef APP
// {
// "path": "pages/API/background-audio/background-audio",
// "group": "1,7,10",
// "style": {
// "navigationBarTitleText": "backgroundAudio | 背景音乐"
// }
// },
// // #endif
// #ifdef WEB || MP || APP
{ {
"path": "pages/API/create-inner-audio-context/create-inner-audio-context", "path": "pages/API/create-inner-audio-context/create-inner-audio-context",
"group": "1,7,9", "group": "1,7,9",
...@@ -1105,8 +1114,9 @@ ...@@ -1105,8 +1114,9 @@
"navigationBarTitleText": "createInnerAudioContext | 音频" "navigationBarTitleText": "createInnerAudioContext | 音频"
} }
}, },
// #endif // #endif
// #ifdef WEB || MP // #ifdef WEB || MP || APP
{ {
"path": "pages/API/create-inner-audio-context/inner-audio-format", "path": "pages/API/create-inner-audio-context/inner-audio-format",
"style": { "style": {
...@@ -1114,7 +1124,7 @@ ...@@ -1114,7 +1124,7 @@
} }
}, },
// #endif // #endif
// #ifdef WEB || MP // #ifdef WEB || MP ||APP
{ {
"path": "pages/API/create-inner-audio-context/inner-audio-path", "path": "pages/API/create-inner-audio-context/inner-audio-path",
"style": { "style": {
......
pages/API/background-audio/background-audio.uvue 0 → 100644
浏览文件 @ d2fa0006
<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap">
<view class="uni-hello-text">注意：请确保通知权限开启，离开当前页面后背景音乐将保持播放，但退出uni-app将停止</view>
<view class="page-body-buttons">
<block v-if="playing">
<view class="page-body-button" @tap="stop">
<image class="image" src="/static/stop.png"></image>
</view>
<view class="page-body-button" @tap="pause">
<image class="image" src="/static/pause.png"></image>
</view>
</block>
<block v-if="!playing">
<view class="page-body-button" @tap="play">
<image class="image" src="/static/play.png"></image>
</view>
</block>
<view class="page-body-button"></view>
</view>
</view>
</view>
</template>
<script>
// #ifdef APP-ANDROID
import Build from 'android.os.Build'
import Application from 'android.app.Application'
// #endif
// import {
// *
// } from "@/uni_modules/uni-getBackgroundAudioManager"
export default {
data() {
return {
title: 'backgroundAudio',
bgAudioMannager: null as BackgroundAudioManager | null,
dataUrl: 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3',
playing: false,
playTime: 0,
formatedPlayTime: '00:00:00',
count:100,
}
},
onLoad: function () {
let bgAudioMannager = uni.getBackgroundAudioManager();
bgAudioMannager.title = '致爱丽丝';
bgAudioMannager.singer = '暂无';
bgAudioMannager.coverImgUrl = 'https://web-assets.dcloud.net.cn/unidoc/zh/Alice.jpeg';
bgAudioMannager.onPlay(() => {
console.log("开始播放");
this.playing = true;
})
bgAudioMannager.onPause(() => {
console.log("暂停播放");
this.playing = false;
})
bgAudioMannager.onEnded(() => {
this.playing = false;
// this.playTime = this.playTime = 0;
// thi.formatedPlayTime = this.formatedPlayTime
})
bgAudioMannager.onNext(() => {
console.log("下一曲");
this.bgAudioMannager?.stop()
bgAudioMannager.title = '致爱丽丝'+this.count++;
bgAudioMannager.singer = '暂无2'+this.count++;
bgAudioMannager.coverImgUrl = 'https://web-assets.dcloud.net.cn/unidoc/zh/Alice.jpeg';
this.bgAudioMannager!.src = this.dataUrl;
this.bgAudioMannager?.play()
})
bgAudioMannager.onPrev(() => {
console.log("上一曲");
this.bgAudioMannager?.stop()
bgAudioMannager.title = '致爱丽丝'+this.count--;
bgAudioMannager.singer = '暂无'+this.count--;
this.bgAudioMannager!.src = this.dataUrl;
this.bgAudioMannager?.play()
})
// bgAudioMannager.onTimeUpdate((e) => {
// if (Math.floor(bgAudioMannager.currentTime) > Math.floor(this.playTime)) {
// this.$backgroundAudioData.formatedPlayTime = this.formatedPlayTime = util.formatTime(Math.floor(bgAudioMannager.currentTime));
// }
// this.$backgroundAudioData.playTime = this.playTime = bgAudioMannager.currentTime;
// })
this.bgAudioMannager = bgAudioMannager;
},
methods: {
play: function () {
console.log('play')
this.bgAudioMannager!.src = this.dataUrl;
// #ifdef APP-ANDROID
if (UTSAndroid.checkSystemPermissionGranted(UTSAndroid.getUniActivity()!, ["android.permission.POST_NOTIFICATIONS"])) {
this.bgAudioMannager!.play()
} else {
// 检查当前 Android 版本和 targetSdkVersion
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU) {
// Android 13 及以上版本
if ((UTSAndroid.getAppContext() as Application).applicationInfo.targetSdkVersion >= 33) {
UTSAndroid.requestSystemPermission(UTSAndroid.getUniActivity()!, ["android.permission.POST_NOTIFICATIONS"], (_ : boolean, p : string[]) => {
this.bgAudioMannager!.play()
}, (_ : boolean, p : string[]) => {
uni.showToast({
title: "权限被拒绝了",
position: "bottom"
})
console.log(p)
})
} else {
uni.showToast({
title: '请手动打开通知权限'
})
}
} else {
uni.showToast({
title: '请手动打开通知权限'
})
}
}
// #endif
},
pause: function () {
this.bgAudioMannager?.pause();
},
stop: function () {
this.bgAudioMannager?.stop();
this.playing = false
}
}
}
</script>
<style>
.image {
width: 150rpx;
height: 150rpx;
}
.page-body-text {
padding: 0 30rpx;
}
.page-body-wrapper {
margin-top: 0;
}
.page-body-info {
padding-bottom: 50rpx;
}
.time-big {
font-size: 60rpx;
margin: 20rpx;
}
.slider {
width: 630rpx;
}
.play-time {
width: 100%;
padding: 20rpx 0;
display: flex;
justify-content: space-between;
box-sizing: border-box;
}
.page-body-buttons {
display: flex;
justify-content: center;
margin-top: 100rpx;
}
.page-body-button {
flex-direction: row;
justify-content: center;
}
</style>
pages/API/create-inner-audio-context/create-inner-audio-context.uvue
浏览文件 @ d2fa0006
<template> <template>
<view class="uni-padding-wrap"> <!-- #ifdef APP -->
<page-head title="audio"></page-head> <scroll-view style="flex: 1;">
<view class="uni-common-mt"> <!-- #endif -->
<slider :value="position" :min="0" :max="duration" @changing="onchanging" @change="onchange"></slider> <view class="uni-padding-wrap">
</view> <page-head title="audio"></page-head>
<view class="uni-title"> <view class="uni-common-mt">
<text class="uni-title-text">属性示例</text> <slider :value="position" :min="0" :max="duration" @changing="onchanging" @change="onchange"></slider>
</View> </view>
<text class="uni-text-box uni-common-mt">当前音频播放位置（保留小数点后 6 位）：{{currentTime}} s</text> <view class="uni-title">
<text class="uni-text-box">音频的长度（单位:s）：{{duration}} s</text> <text class="uni-title-text">属性示例</text>
<text class="uni-text-box">当前是否停止状态：{{isPaused}}</text> </View>
<text class="uni-text-box">音频缓冲的时间点：{{buffered}}</text> <text class="uni-text-box uni-common-mt">当前音频播放位置（保留小数点后 6 位）：{{currentTime}} s</text>
<text class="uni-text-box">当前音量：{{volume}}</text> <text class="uni-text-box">音频的长度（单位:s）：{{duration}} s</text>
<!-- 设置音量无效 --> <text class="uni-text-box">当前是否停止状态：{{isPaused}}</text>
<!-- <button plain :disabled="volume == 1" @click="increaseVolume">增加音量</button> <text class="uni-text-box">音频缓冲的时间点：{{buffered}}</text>
<button plain :disabled="volume == 0" @click="decreaseVolume">减少音量</button> --> <text class="uni-text-box">当前音量：{{volume}}</text>
<!-- 设置音量无效 -->
<text class="uni-subtitle-text uni-title">开始播放的位置（单位：s）</text> <!-- <button plain :disabled="volume == 1" @click="increaseVolume">增加音量</button>
<input :value="startTime" type="number" placeholder="开始播放的位置（单位：s）" class="uni-input" <button plain :disabled="volume == 0" @click="decreaseVolume">减少音量</button> -->
@input="startTimeInput"></input>
<boolean-data :defaultValue="false" title="是否自动开始播放" @change="setAutoplay"></boolean-data> <text class="uni-subtitle-text uni-title">开始播放的位置（单位：s）</text>
<boolean-data :defaultValue="false" title="是否循环播放" @change="setLoop"></boolean-data> <input :value="startTime" type="number" placeholder="开始播放的位置（单位：s）" class="uni-input"
<view class="uni-title"> @input="startTimeInput"></input>
<text class="uni-title-text">方法示例</text> <boolean-data :defaultValue="false" title="是否自动开始播放" @change="setAutoplay"></boolean-data>
</View> <boolean-data :defaultValue="false" title="是否循环播放" @change="setLoop"></boolean-data>
<button :disabled="isPlaying" type="primary" @click="play" class="uni-btn">播放</button> <view class="uni-title">
<button :disabled="!isPlaying" type="primary" @click="pause" class="uni-btn">暂停</button> <text class="uni-title-text">方法示例</text>
<button :disabled="!isPlaying && !isPaused" type="primary" @click="stop" class="uni-btn">停止</button> </View>
<button type="primary" @click="onchange(20)" class="uni-btn">跳转到指定位置20</button> <button :disabled="isPlaying" type="primary" @click="play" class="uni-btn">播放</button>
<button :disabled="!isPlaying" type="primary" @click="pause" class="uni-btn">暂停</button>
<view class="uni-title"> <button :disabled="!isPlaying && !isPaused" type="primary" @click="stop" class="uni-btn">停止</button>
<text class="uni-title-text">格式/路径示例</text> <button type="primary" @click="onchangeValue(20)" class="uni-btn">跳转到指定位置20</button>
</View>
<navigator url="/pages/API/create-inner-audio-context/inner-audio-format" class="uni-btn"> <view class="uni-title">
<button type="primary" @click="pause">音频格式示例</button> <text class="uni-title-text">格式/路径示例</text>
</navigator> </View>
<navigator url="/pages/API/create-inner-audio-context/inner-audio-path" class="uni-btn uni-common-mb"> <navigator url="/pages/API/create-inner-audio-context/inner-audio-format" class="uni-btn">
<button type="primary" @click="pause">音频路径示例</button> <button type="primary" @click="pause">音频格式示例</button>
</navigator> </navigator>
</view> <navigator url="/pages/API/create-inner-audio-context/inner-audio-path" class="uni-btn uni-common-mb">
</template> <button type="primary" @click="pause">音频路径示例</button>
<script lang="uts"> </navigator>
const audioUrl = 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3' </view>
export default { <!-- #ifdef APP -->
data() { </scroll-view>
return { <!-- #endif -->
title: "innerAudioContext", </template>
currentTime: 0, <script lang="uts">
duration: 100, const audioUrl = 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3'
startTime: 0, export default {
buffered: 0, data() {
volume: 0.5, return {
isCanplay: false, title: "innerAudioContext",
isPlaying: false, currentTime: 0,
isPaused: true, duration: 100,
isPlayEnd: false, startTime: 0,
_isChanging: false, buffered: 0,
_audioContext: null as InnerAudioContext | null, volume: 0.5,
// 自动化测试 isCanplay: false,
onSeekingTest: false, isPlaying: false,
onSeekedTest: false, isPaused: true,
onWaitingTest: false isPlayEnd: false,
} _isChanging: false,
}, _audioContext: null as InnerAudioContext | null,
computed: { // 自动化测试
position() { onSeekingTest: false,
return this.isPlayEnd ? 0 : this.currentTime; onSeekedTest: false,
}, onWaitingTest: false
}, }
onReady() { },
this._audioContext = uni.createInnerAudioContext(); computed: {
this._audioContext!.src = audioUrl; position() {
this.volume = this._audioContext!.volume; return this.isPlayEnd ? 0 : this.currentTime;
this.onCanplay() },
}, },
onUnload() { onReady() {
if (this._audioContext != null && this.isPlaying) { this._audioContext = uni.createInnerAudioContext();
this.stop(); this._audioContext!.src = audioUrl;
this._audioContext!.destroy() this.volume = this._audioContext!.volume;
} this.onCanplay()
}, },
methods: { onUnload() {
onCanplay() { if (this._audioContext != null && this.isPlaying) {
this._audioContext!.onCanplay(() => { this.stop();
console.log('音频进入可以播放状态事件'); this._audioContext!.destroy()
this.isCanplay = true; }
// 当音频可以播放时，获取缓冲信息 },
this.buffered = this._audioContext!.buffered; methods: {
this.duration = this._audioContext!.duration || 0; onCanplay() {
}); this._audioContext!.onCanplay(() => {
}, console.log('音频进入可以播放状态事件');
onchanging() { this.isCanplay = true;
this._isChanging = true; // 当音频可以播放时，获取缓冲信息
}, this.buffered = this._audioContext!.buffered;
onchange(e) { this.duration = this._audioContext!.duration
console.log(e, 'e'); });
let pos = typeof e === "number" ? e : e.detail.value; },
this._audioContext!.seek(pos); onchanging() {
this.onSeeking() this._isChanging = true;
this.onSeeked() },
this._isChanging = false; onchange(e : UniSliderChangeEvent) {
}, console.log(e, 'e');
startTimeInput(e : InputEvent) { let pos = e.detail.value;
let startTimeValue = Number(e.detail.value) this._audioContext!.seek(pos);
this._audioContext!.startTime = startTimeValue; this.onSeeking()
this.onchange(startTimeValue) this.onSeeked()
}, this._isChanging = false;
setAutoplay() { },
this._audioContext!.autoplay = !this._audioContext!.autoplay; onchangeValue(pos:number) {
console.log(this._audioContext!.autoplay, 'autoplay'); this._audioContext!.seek(pos);
}, this.onSeeking()
setLoop() { this.onSeeked()
this._audioContext!.loop = !this._audioContext!.loop; this._isChanging = false;
console.log(this._audioContext!.loop, 'loop'); },
}, startTimeInput(e : InputEvent) {
play() { let startTimeValue = parseInt(e.detail.value)
if (!this.isCanplay) { this._audioContext!.startTime = startTimeValue;
uni.showToast({ this.onchangeValue(startTimeValue)
title: '音频未进入可以播放状态，请稍后再试' },
}); setAutoplay() {
return; this._audioContext!.autoplay = !this._audioContext!.autoplay;
} console.log(this._audioContext!.autoplay, 'autoplay');
this.isPlaying = true; },
this._audioContext!.play(); setLoop() {
this.isPlayEnd = false; this._audioContext!.loop = !this._audioContext!.loop;
if (this._audioContext!.startTime > 0) { console.log(this._audioContext!.loop, 'loop');
this.onchange(this._audioContext!.startTime) },
} play() {
this._audioContext!.onPlay(() => { if (!this.isCanplay) {
this.isPaused = false; uni.showToast({
console.log('开始播放', this.isPaused); title: '音频未进入可以播放状态，请稍后再试'
}); });
this.onTimeUpdate() return;
this.onWaiting() }
this.onError() this.isPlaying = true;
this.onEnded() this._audioContext!.play();
}, this.isPlayEnd = false;
onSeeking() { if (this._audioContext!.startTime > 0) {
this._audioContext!.onSeeking(() => { this.onchangeValue(this._audioContext!.startTime)
console.log('音频进行 seek 操作事件'); }
this.onSeekingTest = true this._audioContext!.onPlay(() => {
}); this.isPaused = false;
}, console.log('开始播放', this.isPaused);
onSeeked() { });
this._audioContext!.onSeeked(() => { this.onTimeUpdate()
console.log('音频完成 seek 操作事件'); this.onWaiting()
this.onSeekedTest = true this.onError()
}); this.onEnded()
}, },
onWaiting() { onSeeking() {
this._audioContext!.onWaiting(() => { this._audioContext!.onSeeking(() => {
console.log('音频加载中事件'); console.log('音频进行 seek 操作事件');
this.onWaitingTest = true this.onSeekingTest = true
}); });
}, },
onTimeUpdate() { onSeeked() {
this._audioContext!.onTimeUpdate(() => { this._audioContext!.onSeeked(() => {
// console.log('onTimeUpdate:音频播放进度更新事件,currentTime',this._audioContext!.currentTime); console.log('音频完成 seek 操作事件');
if (this._isChanging === true) { return; } this.onSeekedTest = true
this.currentTime = this._audioContext!.currentTime || 0; });
console.log('currentTime', this.currentTime); },
if (this.currentTime > this.buffered) { onWaiting() {
console.log('缓冲不足'); this._audioContext!.onWaiting(() => {
} console.log('音频加载中事件');
}); this.onWaitingTest = true
}, });
increaseVolume() { },
this.volume = Math.min(this.volume + 0.1, 1); onTimeUpdate() {
this.volume = parseFloat(this.volume.toFixed(1)); this._audioContext!.onTimeUpdate(() => {
console.log('增加音量', this.volume); // console.log('onTimeUpdate:音频播放进度更新事件,currentTime',this._audioContext!.currentTime);
}, if (this._isChanging) { return; }
decreaseVolume() { this.currentTime = this._audioContext!.currentTime
this.volume = Math.max(this.volume - 0.1, 0); console.log('currentTime', this.currentTime);
this.volume = parseFloat(this.volume.toFixed(1)); if (this.currentTime > this.buffered) {
console.log('减少音量', this.volume); console.log('缓冲不足');
}, }
onEnded() { });
this._audioContext!.onEnded(() => { },
console.log('播放结束'); increaseVolume() {
this.currentTime = 0; this.volume = Math.min(this.volume + 0.1, 1);
this.startTime = 0 this.volume = parseFloat(this.volume.toFixed(1));
this.isPlaying = false; console.log('增加音量', this.volume);
this.isPaused = true; },
this.isPlayEnd = true; decreaseVolume() {
}); this.volume = Math.max(this.volume - 0.1, 0);
}, this.volume = parseFloat(this.volume.toFixed(1));
onError() { console.log('减少音量', this.volume);
this._audioContext!.onError((err) => { },
console.log('err', err); onEnded() {
this.isPlaying = false; this._audioContext!.onEnded(() => {
this.isPaused = true; console.log('播放结束');
}); this.currentTime = 0;
}, this.startTime = 0
pause() { this.isPlaying = false;
this._audioContext!.pause(); this.isPaused = true;
this._audioContext!.onPause(() => { this.isPlayEnd = true;
console.log('音频暂停事件'); });
this.isPaused = true; },
}); onError() {
this.isPlaying = false; this._audioContext!.onError((err) => {
}, console.log('err', err);
stop() { this.isPlaying = false;
console.log('stop'); this.isPaused = true;
this._audioContext!.stop(); });
this._audioContext!.onStop(() => { },
// 第一次点停止时，不触发 pause() {
this.isPaused = true; this._audioContext!.pause();
console.log('音频停止事件'); this._audioContext!.onPause(() => {
}); console.log('音频暂停事件');
this.isPlaying = false; this.isPaused = true;
console.log('stop', this.isPaused); });
} this.isPlaying = false;
} },
} stop() {
</script> console.log('stop');
<style> this._audioContext!.stop();
.play-time-area { this._audioContext!.onStop(() => {
display: flex; // 第一次点停止时，不触发
flex-direction: row; this.isPaused = true;
margin-top: 20px; console.log('音频停止事件');
} });
this.isPlaying = false;
.duration { console.log('stop', this.isPaused);
margin-left: auto; }
} }
}
.play-button-area { </script>
display: flex; <style>
flex-direction: row; .play-time-area {
justify-content: center; display: flex;
margin: 50px 0; flex-direction: row;
} margin-top: 20px;
}
.icon-play {
width: 60px; .duration {
height: 60px; margin-left: auto;
} }
.play-button-area {
display: flex;
flex-direction: row;
justify-content: center;
margin: 50px 0;
}
.icon-play {
width: 60px;
height: 60px;
}
</style> </style>
pages/API/create-inner-audio-context/inner-audio-format.uvue
浏览文件 @ d2fa0006
<template> <template>
<page-head :title="title"></page-head> <page-head :title="title"></page-head>
<view class="uni-padding-wrap uni-common-mt"> <!-- #ifdef APP -->
<view class="uni-title"> <scroll-view style="flex: 1;">
<text class="uni-title-text">支持的音频格式示例</text> <!-- #endif -->
</view> <view class="uni-padding-wrap uni-common-mt">
<view class="formats" v-for="(item,index) in supportFormats" :key="index"> <view class="uni-title">
<text class="uni-subtitle-text">{{item.format}}</text> <text class="uni-title-text">支持的音频格式示例</text>
<image class="icon-play" :src="(isPlaying && playIndex==index)?'/static/pause.png':'/static/play.png'" </view>
@click="play(item.src,index)"></image>
</view> <view class="formats" v-for="(item,index) in supportFormats" :key="index">
<text class="uni-subtitle-text">{{item.format}}</text>
<view class="uni-title"> <image class="icon-play" :src="(isPlaying && playIndex==index)?'/static/pause.png':'/static/play.png'"
<text class="uni-title-text">不支持的音频格式</text> @click="play(item.src,index)"></image>
</view> </view>
<view class="formats" v-for="(item,index) in notSupportFormats" :key="index">
<text class="uni-subtitle-text">{{item.format}}</text> <view class="uni-title">
<image class="icon-play" :src="(isPlaying && playIndex==index)?'/static/pause.png':'/static/play.png'" <text class="uni-title-text">不支持的音频格式</text>
@click="play(item.src,index)"></image> </view>
</view> <view class="formats" v-for="(item,index) in notSupportFormats" :key="index">
</view> <text class="uni-subtitle-text">{{item.format}}</text>
</template> <image class="icon-play" :src="(isPlaying && playIndex==index)?'/static/pause.png':'/static/play.png'"
@click="play(item.src,index)"></image>
<script> </view>
type AudioFormat = {
format : string </view>
src : string <!-- #ifdef APP -->
} </scroll-view>
export default { <!-- #endif -->
data() { </template>
return {
title: 'audio-format', <script>
playIndex: 0, type AudioFormat = {
isPlaying: false, format : string
_audioContext: null as InnerAudioContext | null, src : string
supportFormats: [ }
{ export default {
format: 'mp3', data() {
src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.mp3' return {
}, title: 'audio-format',
{ playIndex: 0,
format: 'mp4', isPlaying: false,
src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.mp4' _audioContext: null as InnerAudioContext | null,
}, supportFormats: [
{ {
format: 'm4a', format: 'mp3',
src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.m4a' src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.mp3'
}, },
{ {
format: 'aac', format: 'mp4',
src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.aac' src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.mp4'
}, },
{ {
format: 'flac', format: 'm4a',
src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.flac' src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.m4a'
}, },
{
{ format: 'aac',
format: 'ogg', src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.aac'
src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.ogg' },
}, {
{ format: 'flac',
format: 'wav', src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.flac'
src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.wav' },
},
] as Array<AudioFormat>, {
notSupportFormats: [ format: 'ogg',
{ src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.ogg'
format: 'wma', },
src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.wma' {
}, format: 'wav',
{ src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.wav'
format: 'aiff', },
src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.aiff' ] as Array<AudioFormat>,
}, notSupportFormats: [
{ {
format: 'caf', format: 'wma',
src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.caf' src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.wma'
}, },
{ {
format: '错误格式', format: 'aiff',
src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.wmaa' src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.aiff'
}, },
] as Array<AudioFormat> {
} format: 'caf',
}, src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.caf'
onReady() { },
this._audioContext = uni.createInnerAudioContext(); {
}, format: '错误格式',
onUnload() { src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.wmaa'
if (this._audioContext != null) { },
this.pause(); ] as Array<AudioFormat>
this._audioContext!.destroy() }
} },
}, onReady() {
methods: { this._audioContext = uni.createInnerAudioContext();
pause() { this._audioContext!.onPlay(() => {
this._audioContext!.pause(); console.log('开始播放');
this.isPlaying = false; });
}, this._audioContext!.onPause(()=>{
play(audioUrl, index) { console.log('播放暂停');
// console.log(index,audioUrl); })
if (this.isPlaying && this.playIndex == index) { this._audioContext!.onEnded(() => {
this.pause(); console.log('播放结束');
return; this.isPlaying = false;
} });
this.playIndex = index this._audioContext!.onError((err) => {
this._audioContext!.src = audioUrl; this.isPlaying = false;
this._audioContext!.play(); console.log('err', err);
this.isPlaying = true; });
this._audioContext!.onPlay(() => { },
console.log('开始播放'); onUnload() {
}); if (this._audioContext != null) {
this._audioContext!.onEnded(() => { this.pause();
console.log('播放结束'); this._audioContext!.destroy()
this.isPlaying = false; }
}); },
this._audioContext!.onError((err) => { methods: {
this.isPlaying = false; pause() {
console.log('err', err); this._audioContext!.pause();
}); this.isPlaying = false;
}, },
}, play(audioUrl : string, index : number) {
} // console.log(index,audioUrl);
</script> if (this.isPlaying && this.playIndex == index) {
this.pause();
<style> return;
.formats { }
align-items: center; this.playIndex = index
} this._audioContext!.src = audioUrl;
this._audioContext!.play();
.icon-play { this.isPlaying = true;
width: 60px; },
height: 60px; },
margin: 10px; }
} </script>
</style>
<style>
.formats {
align-items: center;
}
.icon-play {
width: 60px;
height: 60px;
margin: 10px;
}
</style>
\ No newline at end of file
pages/API/create-inner-audio-context/inner-audio-path.uvue
浏览文件 @ d2fa0006
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
description: '本地路径：/static方式', description: '本地路径：/static方式',
src: '/static/test-audio/ForElise.mp3' src: '/static/test-audio/ForElise.mp3'
}, },
{ {
description: '本地路径：../static/', description: '本地路径：../static/',
src: '../../../static/test-audio/ForElise.mp3' src: '../../../static/test-audio/ForElise.mp3'
}, },
...@@ -43,13 +43,24 @@ ...@@ -43,13 +43,24 @@
}, },
{ {
description: '错误路径', description: '错误路径',
src: '../static/test-audio/ForElise.mp3' src: '../static/test-audio/ForElise22.mp3'
}, },
] as Array<AudioPath> ] as Array<AudioPath>
} }
}, },
onReady() { onReady() {
this._audioContext = uni.createInnerAudioContext(); this._audioContext = uni.createInnerAudioContext();
this._audioContext!.onPlay(() => {
console.log('开始播放');
});
this._audioContext!.onEnded(() => {
console.log('播放结束');
this.isPlaying = false;
});
this._audioContext!.onError((err) => {
this.isPlaying = false;
console.log('err', err);
});
}, },
onUnload() { onUnload() {
if (this._audioContext != null) { if (this._audioContext != null) {
...@@ -62,8 +73,8 @@ ...@@ -62,8 +73,8 @@
this._audioContext!.pause(); this._audioContext!.pause();
this.isPlaying = false; this.isPlaying = false;
}, },
play(audioUrl, index) { play(audioUrl:string, index:number) {
// console.log(index,audioUrl); console.log(index,audioUrl);
if (this.isPlaying && this.playIndex == index) { if (this.isPlaying && this.playIndex == index) {
this.pause(); this.pause();
return; return;
...@@ -72,17 +83,6 @@ ...@@ -72,17 +83,6 @@
this._audioContext!.src = audioUrl; this._audioContext!.src = audioUrl;
this._audioContext!.play(); this._audioContext!.play();
this.isPlaying = true; this.isPlaying = true;
this._audioContext!.onPlay(() => {
console.log('开始播放');
});
this._audioContext!.onEnded(() => {
console.log('播放结束');
this.isPlaying = false;
});
this._audioContext!.onError((err) => {
this.isPlaying = false;
console.log('err', err);
});
} }
} }
} }
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或