Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
hello uni-app x
提交
afb5c36d
H
hello uni-app x
项目概览
DCloud
/
hello uni-app x
通知
6004
Star
91
Fork
163
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
18
列表
看板
标记
里程碑
合并请求
1
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
H
hello uni-app x
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
18
Issue
18
列表
看板
标记
里程碑
合并请求
1
合并请求
1
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
afb5c36d
编写于
7月 07, 2024
作者:
DCloud-WZF
💬
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
refactor: 重构 inner-audio 相关页面目录
上级
6a8cc9ab
变更
6
隐藏空白更改
内联
并排
Showing
6 changed file
with
3 addition
and
547 deletion
+3
-547
pages/API/create-inner-audio-context/create-inner-audio-context.test.js
...te-inner-audio-context/create-inner-audio-context.test.js
+1
-1
pages/API/create-inner-audio-context/create-inner-audio-context.uvue
...reate-inner-audio-context/create-inner-audio-context.uvue
+2
-2
pages/API/inner-audio/inner-audio-format.uvue
pages/API/inner-audio/inner-audio-format.uvue
+0
-134
pages/API/inner-audio/inner-audio-path.uvue
pages/API/inner-audio/inner-audio-path.uvue
+0
-99
pages/API/inner-audio/inner-audio.test.js
pages/API/inner-audio/inner-audio.test.js
+0
-73
pages/API/inner-audio/inner-audio.uvue
pages/API/inner-audio/inner-audio.uvue
+0
-238
未找到文件。
pages/API/create-inner-audio-context/
inner-audio
.test.js
→
pages/API/create-inner-audio-context/
create-inner-audio-context
.test.js
浏览文件 @
afb5c36d
...
...
@@ -6,7 +6,7 @@ describe('inner-audio', () => {
return
}
beforeAll
(
async
()
=>
{
page
=
await
program
.
reLaunch
(
'
/pages/API/
inner-audio/inner-audio
'
)
page
=
await
program
.
reLaunch
(
'
/pages/API/
create-inner-audio-context/create-inner-audio-context
'
)
await
page
.
waitFor
(
'
view
'
);
});
...
...
pages/API/create-inner-audio-context/create-inner-audio-context.uvue
浏览文件 @
afb5c36d
...
...
@@ -32,10 +32,10 @@
<view class="uni-title">
<text class="uni-title-text">格式/路径示例</text>
</View>
<navigator url="/pages/API/
inner-audio
/inner-audio-format" class="uni-btn">
<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/
inner-audio
/inner-audio-path" class="uni-btn uni-common-mb">
<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>
...
...
pages/API/inner-audio/inner-audio-format.uvue
已删除
100644 → 0
浏览文件 @
6a8cc9ab
<template>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-title">
<text class="uni-title-text">支持的音频格式示例</text>
</view>
<view class="formats" v-for="(item,index) in supportFormats" :key="index">
<text class="uni-subtitle-text">{{item.format}}</text>
<image class="icon-play" :src="(isPlaying && playIndex==index)?'/static/pause.png':'/static/play.png'" @click="play(item.src,index)"></image>
</view>
<view class="uni-title">
<text class="uni-title-text">不支持的音频格式</text>
</view>
<view class="formats" v-for="(item,index) in notSupportFormats" :key="index">
<text class="uni-subtitle-text">{{item.format}}</text>
<image class="icon-play" :src="(isPlaying && playIndex==index)?'/static/pause.png':'/static/play.png'" @click="play(item.src,index)"></image>
</view>
</view>
</template>
<script>
type AudioFormat = {
format : string
src : string
}
export default {
data() {
return {
title: 'audio-format',
playIndex:0,
isPlaying: false,
_audioContext: null as InnerAudioContext | null,
supportFormats: [
{
format: 'mp3',
src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.mp3'
},
{
format: 'mp4',
src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.mp4'
},
{
format: 'm4a',
src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.m4a'
},
{
format: 'aac',
src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.aac'
},
{
format: 'flac',
src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.flac'
},
{
format: 'ogg',
src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.ogg'
},
{
format: 'wav',
src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.wav'
},
] as Array<AudioFormat>,
notSupportFormats:[
{
format: 'wma',
src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.wma'
},
{
format: 'aiff',
src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.aiff'
},
{
format: 'caf',
src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.caf'
},
{
format: '错误格式',
src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.wmaa'
},
] as Array<AudioFormat>
}
},
onReady() {
this._audioContext = uni.createInnerAudioContext();
},
onUnload() {
if (this._audioContext != null) {
this.pause();
this._audioContext!.destroy()
}
},
methods: {
pause() {
this._audioContext!.pause();
this.isPlaying = false;
},
play(audioUrl,index){
// console.log(index,audioUrl);
if (this.isPlaying && this.playIndex == index) {
this.pause();
return;
}
this.playIndex = index
this._audioContext!.src = audioUrl;
this._audioContext!.play();
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);
});
},
},
}
</script>
<style>
.formats{
align-items: center;
}
.icon-play {
width: 60px;
height: 60px;
margin: 10px;
}
</style>
pages/API/inner-audio/inner-audio-path.uvue
已删除
100644 → 0
浏览文件 @
6a8cc9ab
<template>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-title">
<text class="uni-title-text">音频路径示例</text>
</view>
<view class="formats" v-for="(item,index) in supportPaths" :key="index">
<text class="uni-subtitle-text">{{item.description}}</text>
<image class="icon-play" :src="(isPlaying && playIndex==index)?'/static/pause.png':'/static/play.png'" @click="play(item.src,index)"></image>
</view>
</view>
</template>
<script>
type AudioPath = {
description : string
src : string
}
export default {
data() {
return {
title: 'audio-path',
playIndex:0,
isPlaying: false,
_audioContext: null as InnerAudioContext | null,
supportPaths: [
{
description: '本地路径:/static方式',
src: '/static/test-audio/ForElise.mp3'
},
{
description: '本地路径:../static/',
src: '../../../static/test-audio/ForElise.mp3'
},
{
description: '网络路径',
src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.mp3'
},
{
description: '不存在的音频',
src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/invalid_url.mp3'
},
{
description: '错误路径',
src: '../static/test-audio/ForElise.mp3'
},
] as Array<AudioPath>
}
},
onReady() {
this._audioContext = uni.createInnerAudioContext();
},
onUnload() {
if (this._audioContext != null) {
this.pause();
this._audioContext!.destroy()
}
},
methods: {
pause() {
this._audioContext!.pause();
this.isPlaying = false;
},
play(audioUrl,index){
// console.log(index,audioUrl);
if (this.isPlaying && this.playIndex == index) {
this.pause();
return;
}
this.playIndex = index
this._audioContext!.src = audioUrl;
this._audioContext!.play();
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);
});
}
}
}
</script>
<style>
.formats{
align-items: center;
}
.icon-play {
width: 60px;
height: 60px;
margin: 10px;
}
</style>
pages/API/inner-audio/inner-audio.test.js
已删除
100644 → 0
浏览文件 @
6a8cc9ab
describe
(
'
inner-audio
'
,
()
=>
{
if
(
!
process
.
env
.
uniTestPlatformInfo
.
startsWith
(
'
web
'
))
{
it
(
'
app
'
,
()
=>
{
expect
(
1
).
toBe
(
1
)
})
return
}
beforeAll
(
async
()
=>
{
page
=
await
program
.
reLaunch
(
'
/pages/API/inner-audio/inner-audio
'
)
await
page
.
waitFor
(
'
view
'
);
});
function
getData
(
key
=
''
)
{
return
new
Promise
(
async
(
resolve
,
reject
)
=>
{
const
data
=
await
page
.
data
()
resolve
(
key
?
data
[
key
]
:
data
)
})
}
it
(
'
onCanplay
'
,
async
()
=>
{
await
page
.
waitFor
(
1000
)
await
page
.
waitFor
(
async
()
=>
{
return
await
getData
(
'
isCanplay
'
)
})
expect
(
await
getData
(
'
buffered
'
)).
toBeGreaterThan
(
0
)
})
it
(
'
play-onPlay-onTimeUpdate
'
,
async
()
=>
{
await
page
.
callMethod
(
'
play
'
)
await
page
.
waitFor
(
3000
);
expect
(
await
getData
(
'
isPlaying
'
)).
toBeTruthy
()
console
.
log
(
"
duration:
"
,
await
getData
(
'
duration
'
),
"
currentTime:
"
,
await
getData
(
'
currentTime
'
))
expect
(
await
getData
(
'
duration
'
)).
toBeCloseTo
(
175.109
,
0
);
// console.log("isPaused",await getData('isPaused'))
// expect(await getData('currentTime')).toBeGreaterThan(0);
// expect(await getData('isPaused')).toBeFalsy();
});
it
(
'
seek-onSeeking-onSeeked
'
,
async
()
=>
{
await
page
.
callMethod
(
'
onchange
'
,
20
)
await
page
.
waitFor
(
500
);
expect
(
await
getData
(
'
onSeekingTest
'
)).
toBeTruthy
();
// expect(await getData('onWaitingTest')).toBeTruthy();
expect
(
await
getData
(
'
onSeekedTest
'
)).
toBeTruthy
();
});
it
(
'
pause-onPause
'
,
async
()
=>
{
await
page
.
callMethod
(
'
pause
'
)
await
page
.
waitFor
(
500
);
expect
(
await
getData
(
'
isPlaying
'
)).
toBeFalsy
()
// expect(await getData('isPaused')).toBeTruthy();
});
it
(
'
stop-onStop
'
,
async
()
=>
{
await
page
.
callMethod
(
'
play
'
)
await
page
.
waitFor
(
2000
);
// 第一次点停止时,不触发onStop事件
await
page
.
callMethod
(
'
stop
'
)
await
page
.
callMethod
(
'
stop
'
)
await
page
.
waitFor
(
1000
);
expect
(
await
getData
(
'
isPlaying
'
)).
toBeFalsy
()
// expect(await getData('isPaused')).toBeTruthy();
});
it
(
'
onEnded
'
,
async
()
=>
{
await
page
.
callMethod
(
'
onchange
'
,
173
)
await
page
.
waitFor
(
500
);
await
page
.
callMethod
(
'
play
'
)
await
page
.
waitFor
(
3000
);
// expect(await getData('isPlayEnd')).toBeTruthy();
});
});
pages/API/inner-audio/inner-audio.uvue
已删除
100644 → 0
浏览文件 @
6a8cc9ab
<template>
<view class="uni-padding-wrap">
<page-head title="audio"></page-head>
<view class="uni-common-mt">
<slider :value="position" :min="0" :max="duration" @changing="onchanging" @change="onchange"></slider>
</view>
<view class="uni-title">
<text class="uni-title-text">属性示例</text>
</View>
<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">当前是否停止状态:{{isPaused}}</text>
<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> -->
<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>
<view class="uni-title">
<text class="uni-title-text">方法示例</text>
</View>
<button :disabled="isPlaying" type="primary" @click="play" class="uni-btn">播放</button>
<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="onchange(20)" class="uni-btn">跳转到指定位置20</button>
<view class="uni-title">
<text class="uni-title-text">格式/路径示例</text>
</View>
<navigator url="/pages/API/inner-audio/inner-audio-format" class="uni-btn">
<button type="primary" @click="pause">音频格式示例</button>
</navigator>
<navigator url="/pages/API/inner-audio/inner-audio-path" class="uni-btn uni-common-mb">
<button type="primary" @click="pause">音频路径示例</button>
</navigator>
</view>
</template>
<script lang="uts">
const audioUrl = 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3'
export default {
data() {
return {
title: "innerAudioContext",
currentTime: 0,
duration: 100,
startTime: 0,
buffered: 0,
volume: 0.5,
isCanplay: false,
isPlaying: false,
isPaused: true,
isPlayEnd: false,
_isChanging: false,
_audioContext: null as InnerAudioContext | null,
// 自动化测试
onSeekingTest:false,
onSeekedTest:false,
onWaitingTest:false
}
},
computed: {
position() {
return this.isPlayEnd ? 0 : this.currentTime;
},
},
onReady() {
this._audioContext = uni.createInnerAudioContext();
this._audioContext!.src = audioUrl;
this.volume = this._audioContext!.volume;
this.onCanplay()
},
onUnload() {
if (this._audioContext != null && this.isPlaying) {
this.stop();
this._audioContext!.destroy()
}
},
methods: {
onCanplay() {
this._audioContext!.onCanplay(() => {
console.log('音频进入可以播放状态事件');
this.isCanplay = true;
// 当音频可以播放时,获取缓冲信息
this.buffered = this._audioContext!.buffered;
this.duration = this._audioContext!.duration || 0;
});
},
onchanging() {
this._isChanging = true;
},
onchange(e) {
console.log(e, 'e');
let pos = typeof e === "number" ? e : e.detail.value;
this._audioContext!.seek(pos);
this.onSeeking()
this.onSeeked()
this._isChanging = false;
},
startTimeInput(e : InputEvent) {
let startTimeValue = Number(e.detail.value)
this._audioContext!.startTime = startTimeValue;
this.onchange(startTimeValue)
},
setAutoplay() {
this._audioContext!.autoplay = !this._audioContext!.autoplay;
console.log(this._audioContext!.autoplay, 'autoplay');
},
setLoop() {
this._audioContext!.loop = !this._audioContext!.loop;
console.log(this._audioContext!.loop, 'loop');
},
play() {
if (!this.isCanplay) {
uni.showToast({
title: '音频未进入可以播放状态,请稍后再试'
});
return;
}
this.isPlaying = true;
this._audioContext!.play();
this.isPlayEnd = false;
if (this._audioContext!.startTime > 0) {
this.onchange(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(() => {
console.log('音频进行 seek 操作事件');
this.onSeekingTest = true
});
},
onSeeked() {
this._audioContext!.onSeeked(() => {
console.log('音频完成 seek 操作事件');
this.onSeekedTest = true
});
},
onWaiting() {
this._audioContext!.onWaiting(() => {
console.log('音频加载中事件');
this.onWaitingTest = true
});
},
onTimeUpdate() {
this._audioContext!.onTimeUpdate(() => {
// console.log('onTimeUpdate:音频播放进度更新事件,currentTime',this._audioContext!.currentTime);
if (this._isChanging === true) { return; }
this.currentTime = this._audioContext!.currentTime || 0;
if (this.currentTime > this.buffered) {
console.log('缓冲不足');
}
});
},
increaseVolume() {
this.volume = Math.min(this.volume + 0.1, 1);
this.volume = parseFloat(this.volume.toFixed(1));
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);
},
onEnded() {
this._audioContext!.onEnded(() => {
console.log('播放结束');
this.currentTime = 0;
this.startTime = 0
this.isPlaying = false;
this.isPaused = true;
this.isPlayEnd = true;
});
},
onError() {
this._audioContext!.onError((err) => {
console.log('err', err);
this.isPlaying = false;
this.isPaused = true;
});
},
pause() {
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);
}
}
}
</script>
<style>
.play-time-area {
display: flex;
flex-direction: row;
margin-top: 20px;
}
.duration {
margin-left: auto;
}
.play-button-area {
display: flex;
flex-direction: row;
justify-content: center;
margin: 50px 0;
}
.icon-play {
width: 60px;
height: 60px;
}
</style>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录