Skip to content

H
hello uni-app x

DCloud / hello uni-app x

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

调整inner-audio示例/新增movable-view测试例

上级 04928d1e
隐藏空白更改
内联 并排
Showing with 286 addition and 137 deletion
pages/API/inner-audio/inner-audio.test.js 0 → 100644
浏览文件 @ d8dd1a17
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')
})
console.log("获取缓冲信息",await getData('buffered'))
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')).toBe(175.109)
// 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
浏览文件 @ d8dd1a17
<template> <template>
<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-common-mt play-time-area"> <view class="uni-title">
<text class="current-time">{{currentTime}}</text> <text class="uni-title-text">属性示例</text>
<text class="duration">{{duration}}</text> </View>
</view> <text class="uni-text-box uni-common-mt">当前音频播放位置（保留小数点后 6 位）：{{currentTime}} s</text>
<view class="play-button-area"> <text class="uni-text-box">音频的长度（单位:s）：{{duration}} s</text>
<image class="icon-play" :src="playImage" @click="play"></image> <text class="uni-text-box">当前是否停止状态：{{isPaused}}</text>
</view> --> <text class="uni-text-box">音频缓冲的时间点：{{buffered}}</text>
<button type="primary" @click="play" class="uni-btn">播放</button> <text class="uni-text-box">当前音量：{{volume}}</text>
<button type="primary" @click="pause" class="uni-btn">暂停</button> <!-- 设置音量无效 -->
<button type="primary" @click="stop" class="uni-btn">停止</button> <!-- <button plain :disabled="volume == 1" @click="increaseVolume">增加音量</button>
<button type="primary" @click="onchange('seek')" class="uni-btn">跳转到指定位置</button> <button plain :disabled="volume == 0" @click="decreaseVolume">减少音量</button> -->
<button type="primary" @click="setAutoplay" class="uni-btn">是否自动开始播放</button>
<button type="primary" @click="setLoop" class="uni-btn">是否循环播放</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"> <view class="uni-title">
<text class="uni-title-text">格式/路径示例</text> <text class="uni-title-text">格式/路径示例</text>
</View> </View>
...@@ -26,168 +38,201 @@ ...@@ -26,168 +38,201 @@
<navigator url="/pages/API/inner-audio/inner-audio-path" class="uni-btn"> <navigator url="/pages/API/inner-audio/inner-audio-path" class="uni-btn">
<button type="primary" @click="pause">音频路径示例</button> <button type="primary" @click="pause">音频路径示例</button>
</navigator> </navigator>
</view> </view>
</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",
isPlaying: false, currentTime: 0,
isPlayEnd: false, duration: 100,
currentTime: 0, startTime: 0,
duration: 100, buffered: 0,
pos:10, volume: 0.5,
paused:false, isCanplay: false,
_isChanging:false, isPlaying: false,
_audioContext: null as InnerAudioContext | null isPaused: true,
} isPlayEnd: false,
}, _isChanging: false,
computed: { _audioContext: null as InnerAudioContext | null,
position() { // 自动化测试
return this.isPlayEnd ? 0 : this.currentTime; onSeekingTest:false,
}, onSeekedTest:false,
playImage() { onWaitingTest:false
return this.isPlaying ? "/static/pause.png" : "/static/play.png" }
} },
}, computed: {
position() {
return this.isPlayEnd ? 0 : this.currentTime;
},
},
onReady() { onReady() {
this._audioContext = uni.createInnerAudioContext(); this._audioContext = uni.createInnerAudioContext();
this._audioContext!.src = audioUrl; this._audioContext!.src = audioUrl;
this.volume = this._audioContext!.volume;
this.onCanplay() this.onCanplay()
}, },
onUnload() { onUnload() {
if (this._audioContext != null && this.isPlaying) { if (this._audioContext != null && this.isPlaying) {
this.stop(); this.stop();
this._audioContext!.destroy() this._audioContext!.destroy()
} }
}, },
methods: { methods: {
setAutoplay(){ 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; this._audioContext!.autoplay = !this._audioContext!.autoplay;
console.log(this._audioContext!.autoplay,'autoplay'); console.log(this._audioContext!.autoplay, 'autoplay');
}, },
setLoop(){ setLoop() {
this._audioContext!.loop = !this._audioContext!.loop; this._audioContext!.loop = !this._audioContext!.loop;
console.log(this._audioContext!.loop,'loop'); console.log(this._audioContext!.loop, 'loop');
}, },
onchanging() { play() {
this._isChanging = true; 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(){ onSeeking() {
this._audioContext!.onSeeking(() => { this._audioContext!.onSeeking(() => {
console.log('音频进行 seek 操作事件'); console.log('音频进行 seek 操作事件');
this.onSeekingTest = true
}); });
}, },
onSeeked(){ onSeeked() {
this._audioContext!.onSeeked(() => { this._audioContext!.onSeeked(() => {
console.log('音频完成 seek 操作事件'); console.log('音频完成 seek 操作事件');
this.onSeekedTest = true
}); });
}, },
onchange(e) { onWaiting() {
let pos = e == 'seek' ? 20 : e.detail.value this._audioContext!.onWaiting(() => {
this._audioContext!.seek(pos); console.log('音频加载中事件');
this.onSeeking() this.onWaitingTest = true
this.onSeeked()
this._isChanging = false;
},
onCanplay(){
this._audioContext!.onCanplay(() => {
console.log('音频进入可以播放状态事件');
}); });
}, },
onTimeUpdate(){ onTimeUpdate() {
this._audioContext!.onTimeUpdate((e) => { this._audioContext!.onTimeUpdate(() => {
// console.log('onTimeUpdate:音频播放进度更新事件',e); // console.log('onTimeUpdate:音频播放进度更新事件,currentTime',this._audioContext!.currentTime);
if (this._isChanging === true) { if (this._isChanging === true) { return; }
return; this.currentTime = this._audioContext!.currentTime || 0;
} if (this.currentTime > this.buffered) {
this.currentTime = this._audioContext!.currentTime || 0; console.log('缓冲不足');
this.duration = this._audioContext!.duration || 0; }
}); });
}, },
onPlay(){ increaseVolume() {
this._audioContext!.onPlay(() => { this.volume = Math.min(this.volume + 0.1, 1);
console.log('开始播放'); 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(){ onEnded() {
this._audioContext!.onEnded(() => { this._audioContext!.onEnded(() => {
console.log('播放结束'); console.log('播放结束');
this.currentTime = 0; this.currentTime = 0;
this.isPlaying = false; this.startTime = 0
this.isPlayEnd = true; this.isPlaying = false;
this.isPaused = true;
this.isPlayEnd = true;
}); });
}, },
onError(){ onError() {
this._audioContext!.onError((err) => { this._audioContext!.onError((err) => {
console.log('err',err); console.log('err', err);
this.isPlaying = false; this.isPlaying = false;
}); this.isPaused = true;
},
onWaiting(){
this._audioContext!.onWaiting(() => {
console.log('音频加载中事件');
}); });
}, },
play() { pause() {
// if (this.isPlaying) { this._audioContext!.pause();
// this.pause();
// return;
// }
this.isPlaying = true;
this._audioContext!.play();
this.isPlayEnd = false;
this.onPlay()
this.onWaiting()
this.onTimeUpdate()
this.onError()
this.onEnded()
},
onPause(){
this._audioContext!.onPause(() => { this._audioContext!.onPause(() => {
console.log('音频暂停事件'); console.log('音频暂停事件');
this.isPaused = true;
}); });
this.isPlaying = false;
}, },
pause() { stop() {
this._audioContext!.pause(); console.log('stop');
this.onPause() this._audioContext!.stop();
this.isPlaying = false;
},
onStop(){
this._audioContext!.onStop(() => { this._audioContext!.onStop(() => {
// 第一次点停止时，不触发
this.isPaused = true;
console.log('音频停止事件'); console.log('音频停止事件');
}); });
}, this.isPlaying = false;
stop() { console.log('stop',this.isPaused);
this._audioContext!.stop(); }
this.onStop() }
this.isPlaying = false; }
}
}
}
</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>
pages/component/movable-view/movable-view.test.js 0 → 100644
浏览文件 @ d8dd1a17
let page;
describe('movable-view.uvue', () => {
console.log(process.env.uniTestPlatformInfo,process.env.uniTestPlatformInfo.startsWith('web'))
if (!process.env.uniTestPlatformInfo.startsWith('web')) {
it('app', () => {
expect(1).toBe(1)
})
return
}
beforeAll(async () => {
page = await program.reLaunch('/pages/component/movable-view/movable-view')
await page.waitFor('view');
});
it('移动至 (30px, 30px)', async () => {
expect(await page.data('x')).toBe(0)
expect(await page.data('y')).toBe(0)
await page.callMethod('tap')
await page.waitFor(500);
expect(await page.data('x')).toBe(30)
expect(await page.data('y')).toBe(30)
})
it('放大3倍', async () => {
expect(await page.data('scale')).toBe(2)
await page.callMethod('tap2')
await page.waitFor(500);
expect(await page.data('scale')).toBe(3)
})
})
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或