Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 5995
Star 90
Fork 162
H
hello uni-app x
提交 3dc70b16 编写于 作者: Anne_LXM's avatar Anne_LXM
浏览文件
操作

调整web端inner-audio示例

上级 e868c5f3
显示空白变更内容
内联 并排
Showing with 342 addition and 49 deletion
pages.json
浏览文件 @ 3dc70b16
...@@ -1301,6 +1301,20 @@ ...@@ -1301,6 +1301,20 @@
"navigationBarTitleText" : "inner-audio" "navigationBarTitleText" : "inner-audio"
} }
}, },
{
"path" : "pages/API/inner-audio/inner-audio-format",
"style" :
{
"navigationBarTitleText" : "inner-audio-format"
}
},
{
"path" : "pages/API/inner-audio/inner-audio-path",
"style" :
{
"navigationBarTitleText" : "inner-audio-path"
}
},
// #endif // #endif
// #ifdef APP // #ifdef APP
{ {
......
pages/API/inner-audio/inner-audio-format.uvue 0 → 100644
浏览文件 @ 3dc70b16
<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>
</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'
},
// {
// 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'
// },
] 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 0 → 100644
浏览文件 @ 3dc70b16
<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'
},
] 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.uvue
浏览文件 @ 3dc70b16
...@@ -7,10 +7,25 @@ ...@@ -7,10 +7,25 @@
<!-- <view class="uni-common-mt play-time-area"> <!-- <view class="uni-common-mt play-time-area">
<text class="current-time">{{currentTime}}</text> <text class="current-time">{{currentTime}}</text>
<text class="duration">{{duration}}</text> <text class="duration">{{duration}}</text>
</view> --> </view>
<view class="play-button-area"> <view class="play-button-area">
<image class="icon-play" :src="playImage" @click="play"></image> <image class="icon-play" :src="playImage" @click="play"></image>
</view> </view> -->
<button type="primary" @click="play" class="uni-btn">播放</button>
<button type="primary" @click="pause" class="uni-btn">暂停</button>
<button type="primary" @click="stop" class="uni-btn">停止</button>
<button type="primary" @click="onchange('seek')" class="uni-btn">跳转到指定位置</button>
<button type="primary" @click="setAutoplay" class="uni-btn">是否自动开始播放</button>
<button type="primary" @click="setLoop" class="uni-btn">是否循环播放</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">
<button type="primary" @click="pause">音频路径示例</button>
</navigator>
</view> </view>
</template> </template>
<script lang="uts"> <script lang="uts">
...@@ -23,6 +38,8 @@ ...@@ -23,6 +38,8 @@
isPlayEnd: false, isPlayEnd: false,
currentTime: 0, currentTime: 0,
duration: 100, duration: 100,
pos:10,
paused:false,
_isChanging:false, _isChanging:false,
_audioContext: null as InnerAudioContext | null _audioContext: null as InnerAudioContext | null
} }
...@@ -35,65 +52,117 @@ ...@@ -35,65 +52,117 @@
return this.isPlaying ? "/static/pause.png" : "/static/play.png" return this.isPlaying ? "/static/pause.png" : "/static/play.png"
} }
}, },
onLoad() { onReady() {
this.createAudio(); this._audioContext = uni.createInnerAudioContext();
this._audioContext!.src = audioUrl;
this.onCanplay()
}, },
onUnload() { onUnload() {
if (this._audioContext != null && this.isPlaying) { if (this._audioContext != null && this.isPlaying) {
this.stop(); this.stop();
this._audioContext!.destroy()
} }
}, },
methods: { methods: {
createAudio() { setAutoplay(){
var innerAudioContext = this._audioContext = uni.createInnerAudioContext(); this._audioContext!.autoplay = !this._audioContext!.autoplay;
innerAudioContext.autoplay = false; console.log(this._audioContext!.autoplay,'autoplay');
innerAudioContext.src = audioUrl; },
innerAudioContext.onPlay(() => { setLoop(){
console.log('开始播放'); this._audioContext!.loop = !this._audioContext!.loop;
console.log(this._audioContext!.loop,'loop');
},
onchanging() {
this._isChanging = true;
},
onSeeking(){
this._audioContext!.onSeeking(() => {
console.log('音频进行 seek 操作事件');
});
},
onSeeked(){
this._audioContext!.onSeeked(() => {
console.log('音频完成 seek 操作事件');
}); });
innerAudioContext.onTimeUpdate((e) => { },
onchange(e) {
let pos = e == 'seek' ? 20 : e.detail.value
this._audioContext!.seek(pos);
this.onSeeking()
this.onSeeked()
this._isChanging = false;
},
onCanplay(){
this._audioContext!.onCanplay(() => {
console.log('音频进入可以播放状态事件');
});
},
onTimeUpdate(){
this._audioContext!.onTimeUpdate((e) => {
// console.log('onTimeUpdate:音频播放进度更新事件',e);
if (this._isChanging === true) { if (this._isChanging === true) {
return; return;
} }
this.currentTime = innerAudioContext.currentTime || 0; this.currentTime = this._audioContext!.currentTime || 0;
this.duration = innerAudioContext.duration || 0; this.duration = this._audioContext!.duration || 0;
}); });
innerAudioContext.onEnded(() => { },
onPlay(){
this._audioContext!.onPlay(() => {
console.log('开始播放');
});
},
onEnded(){
this._audioContext!.onEnded(() => {
console.log('播放结束');
this.currentTime = 0; this.currentTime = 0;
this.isPlaying = false; this.isPlaying = false;
this.isPlayEnd = true; this.isPlayEnd = true;
}); });
innerAudioContext.onError((res) => { },
onError(){
this._audioContext!.onError((err) => {
console.log('err',err);
this.isPlaying = false; this.isPlaying = false;
console.log(res.errMsg);
console.log(res.errCode);
}); });
return innerAudioContext;
}, },
onchanging() { onWaiting(){
this._isChanging = true; this._audioContext!.onWaiting(() => {
}, console.log('音频加载中事件');
onchange(e) { });
console.log(e.detail.value);
console.log(typeof e.detail.value);
this._audioContext!.seek(e.detail.value);
this._isChanging = false;
}, },
play() { play() {
if (this.isPlaying) { // if (this.isPlaying) {
this.pause(); // this.pause();
return; // return;
} // }
this.isPlaying = true; this.isPlaying = true;
this._audioContext!.play(); this._audioContext!.play();
this.isPlayEnd = false; this.isPlayEnd = false;
this.onPlay()
this.onWaiting()
this.onTimeUpdate()
this.onError()
this.onEnded()
},
onPause(){
this._audioContext!.onPause(() => {
console.log('音频暂停事件');
});
}, },
pause() { pause() {
this._audioContext!.pause(); this._audioContext!.pause();
this.onPause()
this.isPlaying = false; this.isPlaying = false;
}, },
onStop(){
this._audioContext!.onStop(() => {
console.log('音频停止事件');
});
},
stop() { stop() {
this._audioContext!.stop(); this._audioContext!.stop();
this.onStop()
this.isPlaying = false; this.isPlaying = false;
} }
} }
...@@ -114,7 +183,7 @@ ...@@ -114,7 +183,7 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
margin-top: 50px; margin: 50px 0;
} }
.icon-play { .icon-play {
......
pages/API/map/map.test.js
浏览文件 @ 3dc70b16
const PAGE_PATH = '/pages/API/map/map'
let page; let page;
describe('web-map', () => { describe('web-map', () => {
console.log("uniTestPlatformInfo",process.env.uniTestPlatformInfo) console.log("uniTestPlatformInfo",process.env.uniTestPlatformInfo)
...@@ -9,7 +8,7 @@ describe('web-map', () => { ...@@ -9,7 +8,7 @@ describe('web-map', () => {
return return
} }
beforeAll(async () => { beforeAll(async () => {
page = await program.reLaunch(PAGE_PATH) page = await program.reLaunch('/pages/API/map/map')
await page.waitFor('view'); await page.waitFor('view');
// 等待地图加载完成 // 等待地图加载完成
await page.waitFor(4000); await page.waitFor(4000);
......
pages/component/editor/editor.test.js
浏览文件 @ 3dc70b16
// uni-app自动化测试教程: uni-app自动化测试教程: https://uniapp.dcloud.net.cn/worktile/auto/hbuilderx-extension/ // uni-app自动化测试教程: uni-app自动化测试教程: https://uniapp.dcloud.net.cn/worktile/auto/hbuilderx-extension/
jest.setTimeout(60000); jest.setTimeout(30000);
describe('editor.uvue', () => { describe('editor.uvue', () => {
if (!process.env.uniTestPlatformInfo.startsWith('web')) { if (!process.env.uniTestPlatformInfo.startsWith('web')) {
it('app', () => { it('app', () => {
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或