Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 5992
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 @@
"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
// #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 @@
<!-- <view class="uni-common-mt play-time-area">
<text class="current-time">{{currentTime}}</text>
<text class="duration">{{duration}}</text>
</view> -->
</view>
<view class="play-button-area">
<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>
</template>
<script lang="uts">
......@@ -23,6 +38,8 @@
isPlayEnd: false,
currentTime: 0,
duration: 100,
pos:10,
paused:false,
_isChanging:false,
_audioContext: null as InnerAudioContext | null
}
......@@ -35,65 +52,117 @@
return this.isPlaying ? "/static/pause.png" : "/static/play.png"
}
},
onLoad() {
this.createAudio();
},
onReady() {
this._audioContext = uni.createInnerAudioContext();
this._audioContext!.src = audioUrl;
this.onCanplay()
},
onUnload() {
if (this._audioContext != null && this.isPlaying) {
this.stop();
this._audioContext!.destroy()
}
},
methods: {
createAudio() {
var innerAudioContext = this._audioContext = uni.createInnerAudioContext();
innerAudioContext.autoplay = false;
innerAudioContext.src = audioUrl;
innerAudioContext.onPlay(() => {
console.log('开始播放');
});
innerAudioContext.onTimeUpdate((e) => {
if (this._isChanging === true) {
return;
}
this.currentTime = innerAudioContext.currentTime || 0;
this.duration = innerAudioContext.duration || 0;
});
innerAudioContext.onEnded(() => {
this.currentTime = 0;
this.isPlaying = false;
this.isPlayEnd = true;
});
innerAudioContext.onError((res) => {
this.isPlaying = false;
console.log(res.errMsg);
console.log(res.errCode);
});
return innerAudioContext;
},
onchanging() {
this._isChanging = true;
},
onchange(e) {
console.log(e.detail.value);
console.log(typeof e.detail.value);
this._audioContext!.seek(e.detail.value);
this._isChanging = false;
},
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');
},
onchanging() {
this._isChanging = true;
},
onSeeking(){
this._audioContext!.onSeeking(() => {
console.log('音频进行 seek 操作事件');
});
},
onSeeked(){
this._audioContext!.onSeeked(() => {
console.log('音频完成 seek 操作事件');
});
},
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) {
return;
}
this.currentTime = this._audioContext!.currentTime || 0;
this.duration = this._audioContext!.duration || 0;
});
},
onPlay(){
this._audioContext!.onPlay(() => {
console.log('开始播放');
});
},
onEnded(){
this._audioContext!.onEnded(() => {
console.log('播放结束');
this.currentTime = 0;
this.isPlaying = false;
this.isPlayEnd = true;
});
},
onError(){
this._audioContext!.onError((err) => {
console.log('err',err);
this.isPlaying = false;
});
},
onWaiting(){
this._audioContext!.onWaiting(() => {
console.log('音频加载中事件');
});
},
play() {
if (this.isPlaying) {
this.pause();
return;
}
// if (this.isPlaying) {
// this.pause();
// return;
// }
this.isPlaying = true;
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() {
this._audioContext!.pause();
this.onPause()
this.isPlaying = false;
},
onStop(){
this._audioContext!.onStop(() => {
console.log('音频停止事件');
});
},
stop() {
this._audioContext!.stop();
this.onStop()
this.isPlaying = false;
}
}
......@@ -114,7 +183,7 @@
display: flex;
flex-direction: row;
justify-content: center;
margin-top: 50px;
margin: 50px 0;
}
.icon-play {
......
pages/API/map/map.test.js
浏览文件 @ 3dc70b16
const PAGE_PATH = '/pages/API/map/map'
let page;
describe('web-map', () => {
console.log("uniTestPlatformInfo",process.env.uniTestPlatformInfo)
......@@ -9,7 +8,7 @@ describe('web-map', () => {
return
}
beforeAll(async () => {
page = await program.reLaunch(PAGE_PATH)
page = await program.reLaunch('/pages/API/map/map')
await page.waitFor('view');
// 等待地图加载完成
await page.waitFor(4000);
......
pages/component/editor/editor.test.js
浏览文件 @ 3dc70b16
// uni-app自动化测试教程: uni-app自动化测试教程: https://uniapp.dcloud.net.cn/worktile/auto/hbuilderx-extension/
jest.setTimeout(60000);
jest.setTimeout(30000);
describe('editor.uvue', () => {
if (!process.env.uniTestPlatformInfo.startsWith('web')) {
it('app', () => {
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或