Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 6006
Star 91
Fork 164
H
hello uni-app x
提交 d2fa0006 编写于 作者: WOSHIMAHAIFENG's avatar WOSHIMAHAIFENG
浏览文件
操作

Merge branch 'dev_audio' into 'dev' 

[audio]添加音频示例

See merge request !49
上级 937b99f0 5e179b7c
显示空白变更内容
内联 并排
Showing with 608 addition and 394 deletion
pages.json
浏览文件 @ d2fa0006
......@@ -1097,7 +1097,16 @@
}
},
// #endif
// #ifdef WEB || MP
// // #ifdef APP
// {
// "path": "pages/API/background-audio/background-audio",
// "group": "1,7,10",
// "style": {
// "navigationBarTitleText": "backgroundAudio | 背景音乐"
// }
// },
// // #endif
// #ifdef WEB || MP || APP
{
"path": "pages/API/create-inner-audio-context/create-inner-audio-context",
"group": "1,7,9",
......@@ -1105,8 +1114,9 @@
"navigationBarTitleText": "createInnerAudioContext | 音频"
}
},
// #endif
// #ifdef WEB || MP
// #ifdef WEB || MP || APP
{
"path": "pages/API/create-inner-audio-context/inner-audio-format",
"style": {
......@@ -1114,7 +1124,7 @@
}
},
// #endif
// #ifdef WEB || MP
// #ifdef WEB || MP ||APP
{
"path": "pages/API/create-inner-audio-context/inner-audio-path",
"style": {
......
pages/API/background-audio/background-audio.uvue 0 → 100644
浏览文件 @ d2fa0006
<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap">
<view class="uni-hello-text">注意：请确保通知权限开启，离开当前页面后背景音乐将保持播放，但退出uni-app将停止</view>
<view class="page-body-buttons">
<block v-if="playing">
<view class="page-body-button" @tap="stop">
<image class="image" src="/static/stop.png"></image>
</view>
<view class="page-body-button" @tap="pause">
<image class="image" src="/static/pause.png"></image>
</view>
</block>
<block v-if="!playing">
<view class="page-body-button" @tap="play">
<image class="image" src="/static/play.png"></image>
</view>
</block>
<view class="page-body-button"></view>
</view>
</view>
</view>
</template>
<script>
// #ifdef APP-ANDROID
import Build from 'android.os.Build'
import Application from 'android.app.Application'
// #endif
// import {
// *
// } from "@/uni_modules/uni-getBackgroundAudioManager"
export default {
data() {
return {
title: 'backgroundAudio',
bgAudioMannager: null as BackgroundAudioManager | null,
dataUrl: 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3',
playing: false,
playTime: 0,
formatedPlayTime: '00:00:00',
count:100,
}
},
onLoad: function () {
let bgAudioMannager = uni.getBackgroundAudioManager();
bgAudioMannager.title = '致爱丽丝';
bgAudioMannager.singer = '暂无';
bgAudioMannager.coverImgUrl = 'https://web-assets.dcloud.net.cn/unidoc/zh/Alice.jpeg';
bgAudioMannager.onPlay(() => {
console.log("开始播放");
this.playing = true;
})
bgAudioMannager.onPause(() => {
console.log("暂停播放");
this.playing = false;
})
bgAudioMannager.onEnded(() => {
this.playing = false;
// this.playTime = this.playTime = 0;
// thi.formatedPlayTime = this.formatedPlayTime
})
bgAudioMannager.onNext(() => {
console.log("下一曲");
this.bgAudioMannager?.stop()
bgAudioMannager.title = '致爱丽丝'+this.count++;
bgAudioMannager.singer = '暂无2'+this.count++;
bgAudioMannager.coverImgUrl = 'https://web-assets.dcloud.net.cn/unidoc/zh/Alice.jpeg';
this.bgAudioMannager!.src = this.dataUrl;
this.bgAudioMannager?.play()
})
bgAudioMannager.onPrev(() => {
console.log("上一曲");
this.bgAudioMannager?.stop()
bgAudioMannager.title = '致爱丽丝'+this.count--;
bgAudioMannager.singer = '暂无'+this.count--;
this.bgAudioMannager!.src = this.dataUrl;
this.bgAudioMannager?.play()
})
// bgAudioMannager.onTimeUpdate((e) => {
// if (Math.floor(bgAudioMannager.currentTime) > Math.floor(this.playTime)) {
// this.$backgroundAudioData.formatedPlayTime = this.formatedPlayTime = util.formatTime(Math.floor(bgAudioMannager.currentTime));
// }
// this.$backgroundAudioData.playTime = this.playTime = bgAudioMannager.currentTime;
// })
this.bgAudioMannager = bgAudioMannager;
},
methods: {
play: function () {
console.log('play')
this.bgAudioMannager!.src = this.dataUrl;
// #ifdef APP-ANDROID
if (UTSAndroid.checkSystemPermissionGranted(UTSAndroid.getUniActivity()!, ["android.permission.POST_NOTIFICATIONS"])) {
this.bgAudioMannager!.play()
} else {
// 检查当前 Android 版本和 targetSdkVersion
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU) {
// Android 13 及以上版本
if ((UTSAndroid.getAppContext() as Application).applicationInfo.targetSdkVersion >= 33) {
UTSAndroid.requestSystemPermission(UTSAndroid.getUniActivity()!, ["android.permission.POST_NOTIFICATIONS"], (_ : boolean, p : string[]) => {
this.bgAudioMannager!.play()
}, (_ : boolean, p : string[]) => {
uni.showToast({
title: "权限被拒绝了",
position: "bottom"
})
console.log(p)
})
} else {
uni.showToast({
title: '请手动打开通知权限'
})
}
} else {
uni.showToast({
title: '请手动打开通知权限'
})
}
}
// #endif
},
pause: function () {
this.bgAudioMannager?.pause();
},
stop: function () {
this.bgAudioMannager?.stop();
this.playing = false
}
}
}
</script>
<style>
.image {
width: 150rpx;
height: 150rpx;
}
.page-body-text {
padding: 0 30rpx;
}
.page-body-wrapper {
margin-top: 0;
}
.page-body-info {
padding-bottom: 50rpx;
}
.time-big {
font-size: 60rpx;
margin: 20rpx;
}
.slider {
width: 630rpx;
}
.play-time {
width: 100%;
padding: 20rpx 0;
display: flex;
justify-content: space-between;
box-sizing: border-box;
}
.page-body-buttons {
display: flex;
justify-content: center;
margin-top: 100rpx;
}
.page-body-button {
flex-direction: row;
justify-content: center;
}
</style>
pages/API/create-inner-audio-context/create-inner-audio-context.uvue
浏览文件 @ d2fa0006
<template>
<!-- #ifdef APP -->
<scroll-view style="flex: 1;">
<!-- #endif -->
<view class="uni-padding-wrap">
<page-head title="audio"></page-head>
<view class="uni-common-mt">
......@@ -27,7 +30,7 @@
<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>
<button type="primary" @click="onchangeValue(20)" class="uni-btn">跳转到指定位置20</button>
<view class="uni-title">
<text class="uni-title-text">格式/路径示例</text>
......@@ -39,6 +42,9 @@
<button type="primary" @click="pause">音频路径示例</button>
</navigator>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script lang="uts">
const audioUrl = 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3'
......@@ -87,24 +93,30 @@
this.isCanplay = true;
// 当音频可以播放时，获取缓冲信息
this.buffered = this._audioContext!.buffered;
this.duration = this._audioContext!.duration || 0;
this.duration = this._audioContext!.duration
});
},
onchanging() {
this._isChanging = true;
},
onchange(e) {
onchange(e : UniSliderChangeEvent) {
console.log(e, 'e');
let pos = typeof e === "number" ? e : e.detail.value;
let pos = e.detail.value;
this._audioContext!.seek(pos);
this.onSeeking()
this.onSeeked()
this._isChanging = false;
},
onchangeValue(pos:number) {
this._audioContext!.seek(pos);
this.onSeeking()
this.onSeeked()
this._isChanging = false;
},
startTimeInput(e : InputEvent) {
let startTimeValue = Number(e.detail.value)
let startTimeValue = parseInt(e.detail.value)
this._audioContext!.startTime = startTimeValue;
this.onchange(startTimeValue)
this.onchangeValue(startTimeValue)
},
setAutoplay() {
this._audioContext!.autoplay = !this._audioContext!.autoplay;
......@@ -125,7 +137,7 @@
this._audioContext!.play();
this.isPlayEnd = false;
if (this._audioContext!.startTime > 0) {
this.onchange(this._audioContext!.startTime)
this.onchangeValue(this._audioContext!.startTime)
}
this._audioContext!.onPlay(() => {
this.isPaused = false;
......@@ -157,8 +169,8 @@
onTimeUpdate() {
this._audioContext!.onTimeUpdate(() => {
// console.log('onTimeUpdate:音频播放进度更新事件,currentTime',this._audioContext!.currentTime);
if (this._isChanging === true) { return; }
this.currentTime = this._audioContext!.currentTime || 0;
if (this._isChanging) { return; }
this.currentTime = this._audioContext!.currentTime
console.log('currentTime', this.currentTime);
if (this.currentTime > this.buffered) {
console.log('缓冲不足');
......
pages/API/create-inner-audio-context/inner-audio-format.uvue
浏览文件 @ d2fa0006
<template>
<page-head :title="title"></page-head>
<!-- #ifdef APP -->
<scroll-view style="flex: 1;">
<!-- #endif -->
<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'"
......@@ -18,7 +22,11 @@
<image class="icon-play" :src="(isPlaying && playIndex==index)?'/static/pause.png':'/static/play.png'"
@click="play(item.src,index)"></image>
</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script>
......@@ -86,6 +94,20 @@
},
onReady() {
this._audioContext = uni.createInnerAudioContext();
this._audioContext!.onPlay(() => {
console.log('开始播放');
});
this._audioContext!.onPause(()=>{
console.log('播放暂停');
})
this._audioContext!.onEnded(() => {
console.log('播放结束');
this.isPlaying = false;
});
this._audioContext!.onError((err) => {
this.isPlaying = false;
console.log('err', err);
});
},
onUnload() {
if (this._audioContext != null) {
......@@ -98,7 +120,7 @@
this._audioContext!.pause();
this.isPlaying = false;
},
play(audioUrl, index) {
play(audioUrl : string, index : number) {
// console.log(index,audioUrl);
if (this.isPlaying && this.playIndex == index) {
this.pause();
......@@ -108,17 +130,6 @@
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);
});
},
},
}
......
pages/API/create-inner-audio-context/inner-audio-path.uvue
浏览文件 @ d2fa0006
......@@ -43,13 +43,24 @@
},
{
description: '错误路径',
src: '../static/test-audio/ForElise.mp3'
src: '../static/test-audio/ForElise22.mp3'
},
] as Array<AudioPath>
}
},
onReady() {
this._audioContext = uni.createInnerAudioContext();
this._audioContext!.onPlay(() => {
console.log('开始播放');
});
this._audioContext!.onEnded(() => {
console.log('播放结束');
this.isPlaying = false;
});
this._audioContext!.onError((err) => {
this.isPlaying = false;
console.log('err', err);
});
},
onUnload() {
if (this._audioContext != null) {
......@@ -62,8 +73,8 @@
this._audioContext!.pause();
this.isPlaying = false;
},
play(audioUrl, index) {
// console.log(index,audioUrl);
play(audioUrl:string, index:number) {
console.log(index,audioUrl);
if (this.isPlaying && this.playIndex == index) {
this.pause();
return;
......@@ -72,17 +83,6 @@
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);
});
}
}
}
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或