Skip to content

H
hello uni-app x

DCloud / hello uni-app x

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

调整背景音频播放示例。

上级 9a6056d7
隐藏空白更改
内联 并排
Showing with 180 addition and 137 deletion
pages/API/get-background-audio-manager/get-background-audio-manager.uvue
浏览文件 @ b4266766
<template> <template>
<view> <view>
<page-head :title="title"></page-head> <page-head :title="title"></page-head>
<view class="uni-padding-wrap"> <view class="uni-padding-wrap">
<view class="uni-hello-text">注意：离开当前页面后背景音乐将保持播放</view> <view class="uni-hello-text">注意：离开当前页面后背景音乐将保持播放，后台控制中心点击上一曲、下一曲切换到第102和104首音乐时会出现播放失败示例</view>
<view class="page-body-buttons"> <view class="page-body-buttons">
<template v-if="playing"> <template v-if="playing">
<view class="page-body-button" @tap="stop"> <view class="page-body-button" @tap="stop">
<image class="image" src="/static/stop.png"></image> <image class="image" src="/static/stop.png"></image>
</view> </view>
<view class="page-body-button" @tap="pause"> <view class="page-body-button" @tap="pause">
<image class="image" src="/static/pause.png"></image> <image class="image" src="/static/pause.png"></image>
</view> </view>
</template> </template>
<template v-if="!playing"> <template v-if="!playing">
<view class="page-body-button" @tap="play"> <view class="page-body-button" @tap="play">
<image class="image" src="/static/play.png"></image> <image class="image" src="/static/play.png"></image>
</view> </view>
</template> </template>
<view class="page-body-button"></view> <view class="page-body-button"></view>
</view> </view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
title: 'backgroundAudio', title: 'backgroundAudio',
bgAudioMannager: null as BackgroundAudioManager | null, bgAudioMannager: null as BackgroundAudioManager | null,
dataUrl: 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3', dataUrl: 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3',
playing: false, playing: false,
playTime: 0, playTime: 0,
formatedPlayTime: '00:00:00', formatedPlayTime: '00:00:00',
count: 100, count: 100,
} isCanplay: false,
}, }
onLoad: function () { },
let bgAudioMannager = uni.getBackgroundAudioManager(); onLoad: function () {
bgAudioMannager.title = '致爱丽丝'; let bgAudioMannager = uni.getBackgroundAudioManager();
bgAudioMannager.singer = '路德维希·范·贝多芬'; bgAudioMannager.title = '致爱丽丝' + this.count;
bgAudioMannager.coverImgUrl = 'https://web-assets.dcloud.net.cn/unidoc/zh/Alice.jpeg'; bgAudioMannager.epname = '专辑名：致爱丽丝' + this.count
bgAudioMannager.singer = '歌手：暂无' + this.count;
bgAudioMannager.onPlay(() => { bgAudioMannager.coverImgUrl = 'https://web-assets.dcloud.net.cn/unidoc/zh/Alice.jpeg';
console.log("开始播放"); bgAudioMannager.onCanplay(() => {
this.playing = true; console.log("音频进入可以播放状态事件");
}) this.isCanplay = true
bgAudioMannager.onPause(() => { this.bgAudioMannager!.play()
console.log("暂停播放"); })
this.playing = false; bgAudioMannager.onPlay(() => {
}) console.log("开始播放");
bgAudioMannager.onEnded(() => { this.playing = true;
this.playing = false; })
}) bgAudioMannager.onPause(() => {
bgAudioMannager.onNext(() => { console.log("暂停播放");
console.log("下一曲"); this.playing = false;
this.bgAudioMannager?.stop() })
bgAudioMannager.title = '致爱丽丝' + this.count++; bgAudioMannager.onStop(() => {
bgAudioMannager.singer = '路德维希·范·贝多芬'; console.log("停止播放");
bgAudioMannager.coverImgUrl = 'https://web-assets.dcloud.net.cn/unidoc/zh/Alice.jpeg'; this.playing = false;
this.bgAudioMannager!.src = this.dataUrl; })
this.bgAudioMannager?.play() bgAudioMannager.onEnded(() => {
}) console.log("播放结束");
bgAudioMannager.onPrev(() => { this.playing = false;
console.log("上一曲"); // this.playTime = this.playTime = 0;
this.bgAudioMannager?.stop() // thi.formatedPlayTime = this.formatedPlayTime
bgAudioMannager.title = '致爱丽丝' + this.count--; })
bgAudioMannager.singer = '路德维希·范·贝多芬'; bgAudioMannager.onNext(() => {
this.bgAudioMannager!.src = this.dataUrl; this.count++
this.bgAudioMannager?.play() console.log("下一曲", this.count);
}) this.bgAudioMannager?.stop()
this.bgAudioMannager = bgAudioMannager; bgAudioMannager.title = '致爱丽丝' + this.count;
this.playing = !bgAudioMannager.paused bgAudioMannager.singer = '歌手：暂无' + this.count;
}, if (this.count == 102 || this.count == 104) {
methods: { this.dataUrl = 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise1.mp3'
play: function () { } else {
console.log('play') this.dataUrl = 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3'
this.bgAudioMannager!.src = this.dataUrl; }
this.bgAudioMannager!.play() bgAudioMannager.coverImgUrl = 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/music-a.png';
}, this.bgAudioMannager!.src = this.dataUrl;
pause: function () { this.bgAudioMannager?.play()
this.bgAudioMannager?.pause(); })
}, bgAudioMannager.onPrev(() => {
stop: function () { this.count--
this.bgAudioMannager?.stop(); console.log("上一曲", this.count);
this.playing = false this.bgAudioMannager?.stop()
} bgAudioMannager.title = '致爱丽丝' + this.count;
} bgAudioMannager.singer = '歌手：暂无' + this.count;
} if (this.count == 102 || this.count == 104) {
</script> this.dataUrl = 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise1.mp3'
} else {
<style> this.dataUrl = 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3'
.image { }
width: 150rpx; bgAudioMannager.coverImgUrl = 'https://web-assets.dcloud.net.cn/unidoc/zh/Alice.jpeg';
height: 150rpx; this.bgAudioMannager!.src = this.dataUrl;
} this.bgAudioMannager?.play()
})
.page-body-text { bgAudioMannager.onSeeking(() => {
padding: 0 30rpx; console.log('音频进行 seek 操作事件');
} })
bgAudioMannager.onSeeked(() => {
.page-body-wrapper { console.log('音频完成 seek 操作事件');
margin-top: 0; })
} bgAudioMannager.onWaiting(() => {
console.log('音频加载中事件');
.page-body-info { })
padding-bottom: 50rpx; bgAudioMannager.onTimeUpdate(() => {
} console.log('onTimeUpdate', bgAudioMannager.currentTime)
})
.time-big { bgAudioMannager.onError((err) => {
font-size: 60rpx; console.log('播放出错err', err);
margin: 20rpx; })
} this.bgAudioMannager = bgAudioMannager;
this.playing = !bgAudioMannager.paused
.slider { },
width: 630rpx; methods: {
} play: function () {
console.log('play')
.play-time { this.bgAudioMannager!.src = this.dataUrl;
width: 100%; if (this.isCanplay) {
padding: 20rpx 0; this.bgAudioMannager!.play()
display: flex; }
justify-content: space-between; },
box-sizing: border-box; pause: function () {
} this.bgAudioMannager?.pause();
},
.page-body-buttons { stop: function () {
display: flex; this.bgAudioMannager?.stop();
justify-content: center; this.playing = false
margin-top: 100rpx; }
} }
}
.page-body-button { </script>
flex-direction: row;
justify-content: center; <style>
margin-bottom: 10px; .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;
flex-direction: column;
}
.page-body-button {
flex-direction: row;
justify-content: center;
}
</style> </style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或