Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 6045
Star 91
Fork 165
H
hello uni-app x
提交 3d1667d1 编写于 作者: zhaofengliang920817's avatar zhaofengliang920817
浏览文件
操作

iOS｜修改音频格式示例。

上级 5c1c47ca
隐藏空白更改
内联 并排
Showing with 144 addition and 139 deletion
pages/API/create-inner-audio-context/inner-audio-format.uvue
浏览文件 @ 3d1667d1
<template> <template>
<page-head :title="title"></page-head> <page-head :title="title"></page-head>
<!-- #ifdef APP --> <!-- #ifdef APP -->
<scroll-view style="flex: 1;"> <scroll-view style="flex: 1;">
<!-- #endif --> <!-- #endif -->
<view class="uni-padding-wrap uni-common-mt"> <view class="uni-padding-wrap uni-common-mt">
<view class="formats" v-for="(item,index) in supportFormats" :key="index"> <view class="formats" v-for="(item,index) in supportFormats" :key="index">
<text class="uni-subtitle-text">{{item.format}}</text> <text class="uni-subtitle-text">{{item.format}}</text>
<image class="icon-play" :src="(isPlaying && playIndex==index)?'/static/pause.png':'/static/play.png'" <image class="icon-play" :src="(isPlaying && playIndex==index)?'/static/pause.png':'/static/play.png'"
@click="play(item.src,index)"></image> @click="play(item.src,index)"></image>
</view> </view>
<view class="formats" v-for="(item,index) in notSupportFormats" :key="index"> <view class="formats" v-for="(item,index) in notSupportFormats" :key="index">
<text class="uni-subtitle-text">{{item.format}}(Android/web 不支持)</text> <text class="uni-subtitle-text">{{ item.format + (item.support) }}</text>
<image class="icon-play" :src="(isPlaying && playIndex==index)?'/static/pause.png':'/static/play.png'" <image class="icon-play" :src="(isPlaying && playIndex==index)?'/static/pause.png':'/static/play.png'"
@click="play(item.src,index)"></image> @click="play(item.src,index)"></image>
</view> </view>
</view> </view>
<!-- #ifdef APP --> <!-- #ifdef APP -->
</scroll-view> </scroll-view>
<!-- #endif --> <!-- #endif -->
</template> </template>
<script> <script>
type AudioFormat = { type AudioFormat = {
format : string format : string
src : string support: string | null
} src : string
export default { }
data() { export default {
return { data() {
title: 'audio-format', return {
playIndex: 0, title: 'audio-format',
isPlaying: false, playIndex: 0,
_audioContext: null as InnerAudioContext | null, isPlaying: false,
supportFormats: [ _audioContext: null as InnerAudioContext | null,
{ supportFormats: [
format: 'mp3', {
src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.mp3' 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: '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: '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: '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: 'flac',
}, src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.flac'
},
{ {
format: 'ogg', format: 'wav',
src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.ogg' src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.wav'
}, },
{ ] as Array<AudioFormat>,
format: 'wav', notSupportFormats: [
src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.wav' {
}, format: 'ogg',
] as Array<AudioFormat>, support: '(iOS 不支持)',
notSupportFormats: [ 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: 'wma',
}, support: '(iOS/Android/web 不支持)',
{ 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: 'aiff',
{ support: '(Android/web 不支持)',
format: 'caf', src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.aiff'
src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.caf' },
}, {
{ format: 'caf',
format: '错误格式', support: '(Android/web 不支持)',
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.caf'
}, },
] as Array<AudioFormat> {
} format: '错误格式',
}, support: '(iOS/Android/web 不支持)',
onReady() { src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.wmaa'
this._audioContext = uni.createInnerAudioContext(); },
this._audioContext!.onPlay(() => { ] as Array<AudioFormat>
console.log('开始播放'); }
}); },
this._audioContext!.onPause(()=>{ onReady() {
console.log('播放暂停'); this._audioContext = uni.createInnerAudioContext();
}) this._audioContext!.onPlay(() => {
this._audioContext!.onEnded(() => { console.log('开始播放');
console.log('播放结束'); });
this.isPlaying = false; this._audioContext!.onPause(() => {
}); console.log('播放暂停');
this._audioContext!.onError((err) => { })
this.isPlaying = false; this._audioContext!.onEnded(() => {
console.log('err', err); console.log('播放结束');
}); this.isPlaying = false;
}, });
onUnload() { this._audioContext!.onError((err) => {
if (this._audioContext != null) { this.isPlaying = false;
this.pause(); console.log('err', err);
this._audioContext!.destroy() });
} },
}, onUnload() {
methods: { if (this._audioContext != null) {
pause() { this.pause();
this._audioContext!.pause(); this._audioContext!.destroy()
this.isPlaying = false; }
}, },
play(audioUrl : string, index : number) { methods: {
// console.log(index,audioUrl); pause() {
if (this.isPlaying && this.playIndex == index) { this._audioContext!.pause();
this.pause(); this.isPlaying = false;
return; },
} play(audioUrl : string, index : number) {
this.playIndex = index // console.log(index,audioUrl);
this._audioContext!.src = audioUrl; if (this.isPlaying && this.playIndex == index) {
this._audioContext!.play(); this.pause();
this.isPlaying = true; return;
}, }
}, this.playIndex = index
} this._audioContext!.src = audioUrl;
</script> this._audioContext!.play();
this.isPlaying = true;
<style> },
.formats { },
align-items: center; }
} </script>
.icon-play { <style>
width: 60px; .formats {
height: 60px; align-items: center;
margin: 10px; }
}
.icon-play {
width: 60px;
height: 60px;
margin: 10px;
}
</style> </style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或