Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
hello uni-app x
提交
b4266766
H
hello uni-app x
项目概览
DCloud
/
hello uni-app x
通知
6048
Star
92
Fork
165
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
19
列表
看板
标记
里程碑
合并请求
1
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
H
hello uni-app x
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
19
Issue
19
列表
看板
标记
里程碑
合并请求
1
合并请求
1
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
b4266766
编写于
1星期前
作者:
zhaofengliang920817
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
调整背景音频播放示例。
上级
9a6056d7
无相关合并请求
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
180 addition
and
137 deletion
+180
-137
pages/API/get-background-audio-manager/get-background-audio-manager.uvue
...ackground-audio-manager/get-background-audio-manager.uvue
+180
-137
未找到文件。
pages/API/get-background-audio-manager/get-background-audio-manager.uvue
浏览文件 @
b4266766
<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap">
<view class="uni-hello-text">注意:离开当前页面后背景音乐将保持播放</view>
<view class="page-body-buttons">
<template 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>
</template>
<template v-if="!playing">
<view class="page-body-button" @tap="play">
<image class="image" src="/static/play.png"></image>
</view>
</template>
<view class="page-body-button"></view>
</view>
</view>
</view>
</template>
<script>
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;
})
bgAudioMannager.onNext(() => {
console.log("下一曲");
this.bgAudioMannager?.stop()
bgAudioMannager.title = '致爱丽丝' + this.count++;
bgAudioMannager.singer = '路德维希·范·贝多芬';
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.bgAudioMannager!.src = this.dataUrl;
this.bgAudioMannager?.play()
})
this.bgAudioMannager = bgAudioMannager;
this.playing = !bgAudioMannager.paused
},
methods: {
play: function () {
console.log('play')
this.bgAudioMannager!.src = this.dataUrl;
this.bgAudioMannager!.play()
},
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;
margin-bottom: 10px;
}
<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap">
<view class="uni-hello-text">注意:离开当前页面后背景音乐将保持播放,后台控制中心点击上一曲、下一曲切换到第102和104首音乐时会出现播放失败示例</view>
<view class="page-body-buttons">
<template 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>
</template>
<template v-if="!playing">
<view class="page-body-button" @tap="play">
<image class="image" src="/static/play.png"></image>
</view>
</template>
<view class="page-body-button"></view>
</view>
</view>
</view>
</template>
<script>
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,
isCanplay: false,
}
},
onLoad: function () {
let bgAudioMannager = uni.getBackgroundAudioManager();
bgAudioMannager.title = '致爱丽丝' + this.count;
bgAudioMannager.epname = '专辑名:致爱丽丝' + this.count
bgAudioMannager.singer = '歌手:暂无' + this.count;
bgAudioMannager.coverImgUrl = 'https://web-assets.dcloud.net.cn/unidoc/zh/Alice.jpeg';
bgAudioMannager.onCanplay(() => {
console.log("音频进入可以播放状态事件");
this.isCanplay = true
this.bgAudioMannager!.play()
})
bgAudioMannager.onPlay(() => {
console.log("开始播放");
this.playing = true;
})
bgAudioMannager.onPause(() => {
console.log("暂停播放");
this.playing = false;
})
bgAudioMannager.onStop(() => {
console.log("停止播放");
this.playing = false;
})
bgAudioMannager.onEnded(() => {
console.log("播放结束");
this.playing = false;
// this.playTime = this.playTime = 0;
// thi.formatedPlayTime = this.formatedPlayTime
})
bgAudioMannager.onNext(() => {
this.count++
console.log("下一曲", this.count);
this.bgAudioMannager?.stop()
bgAudioMannager.title = '致爱丽丝' + this.count;
bgAudioMannager.singer = '歌手:暂无' + this.count;
if (this.count == 102 || this.count == 104) {
this.dataUrl = 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise1.mp3'
} else {
this.dataUrl = 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3'
}
bgAudioMannager.coverImgUrl = 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/music-a.png';
this.bgAudioMannager!.src = this.dataUrl;
this.bgAudioMannager?.play()
})
bgAudioMannager.onPrev(() => {
this.count--
console.log("上一曲", this.count);
this.bgAudioMannager?.stop()
bgAudioMannager.title = '致爱丽丝' + this.count;
bgAudioMannager.singer = '歌手:暂无' + this.count;
if (this.count == 102 || this.count == 104) {
this.dataUrl = 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise1.mp3'
} else {
this.dataUrl = 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3'
}
bgAudioMannager.coverImgUrl = 'https://web-assets.dcloud.net.cn/unidoc/zh/Alice.jpeg';
this.bgAudioMannager!.src = this.dataUrl;
this.bgAudioMannager?.play()
})
bgAudioMannager.onSeeking(() => {
console.log('音频进行 seek 操作事件');
})
bgAudioMannager.onSeeked(() => {
console.log('音频完成 seek 操作事件');
})
bgAudioMannager.onWaiting(() => {
console.log('音频加载中事件');
})
bgAudioMannager.onTimeUpdate(() => {
console.log('onTimeUpdate', bgAudioMannager.currentTime)
})
bgAudioMannager.onError((err) => {
console.log('播放出错err', err);
})
this.bgAudioMannager = bgAudioMannager;
this.playing = !bgAudioMannager.paused
},
methods: {
play: function () {
console.log('play')
this.bgAudioMannager!.src = this.dataUrl;
if (this.isCanplay) {
this.bgAudioMannager!.play()
}
},
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;
flex-direction: column;
}
.page-body-button {
flex-direction: row;
justify-content: center;
}
</style>
This diff is collapsed.
Click to expand it.
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录
新手
引导
客服
返回
顶部