123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146 |
- <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>
- 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;
- 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;
- }
- </style>
|