提交 615b79f6 编写于 作者: M mahaifeng

[audio]添加音频示例

上级 7c722ee4
<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"></view>
<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.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();
}
}
}
</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>
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册