<style lang="scss" scoped>
.content {
position: relative;
width: 100%;
height: 500upx;
&-bg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 2;
}
&-view {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 500upx;
z-index: 22;
padding: 80upx 60upx 50upx;
box-sizing: border-box;
text-align: center;
color: #fff;
&-title {
font-size: 40upx;
font-weight: 600;
margin-bottom: 30upx;
}
&-author {
font-size: 26upx;
margin-bottom: 60upx;
}
&-slider {
margin-bottom: 40upx;
padding: 0 40upx;
display: flex;
justify-content: flex-start;
align-items: center;
&-left{
width: 90%;
}
&-right{
width: 10%;
}
}
&-operationBoard {
display: flex;
justify-content: center;
align-items: center;
&-img {
width: 70upx;
height: 60upx;
margin-right: 90upx;
}
&-img:nth-child(3) {
margin-right: 0;
}
}
}
}
.flex {
font-size: 26upx;
padding: 20upx;
height: calc(100vh - 530upx);
overflow-y: auto;
&-list {
display: flex;
justify-content: flex-start;
align-items: center;
border-bottom: 1px solid #efefef;
padding: 10upx 0;
&-num {
width: 10%;
}
&-name {
width: 80%;
text-align: left;
color: #666;
&-title {
font-size: 28upx;
font-weight: 600;
color: #333;
margin-bottom: 10upx;
}
}
&-icon {
width: 10%;
&-img {
width: 40upx;
height: 40upx;
}
}
}
}
</style>
<template>
<view class="box">
<view class="content">
<image class="content-bg" src="/static/bg.png"></image>
<view class="content-view">
<view class="content-view-title">《{{current.name}}》</view>
<view class="content-view-author">歌手: {{current.author}}</view>
<view class="content-view-slider">
<view class="content-view-slider-left">
<slider :value="progress" activeColor="#C52E2E" backgroundColor="#fff" block-color="#C52E2E"
block-size="10" />
</view>
<view class="content-view-slider-right">
{{progressTime}}
</view>
</view>
<view class="content-view-operationBoard">
<image class='content-view-operationBoard-img' @click="autoPlay(-1)" src="../../static/i_1.png" mode=""></image>
<image class='content-view-operationBoard-img' @click="isParse()" src="../../static/i_2.png" mode=""></image>
<image class='content-view-operationBoard-img' @click="autoPlay(1)" src="../../static/i_3.png" mode=""></image>
</view>
<!-- <audio :src="current.src" :name="current.name" :author="current.author" :action="audioAction" controls @play='play()'></audio> -->
</view>
</view>
<scroll-view scroll-y class="flex">
<view class="flex-list" v-for="(item,index) in audioList" :key='item.id' @click="playAaudio(item.id,index)">
<view class="flex-list-num">{{item.id}}</view>
<view class="flex-list-name">
<view class="flex-list-name-title">{{item.name}}</view>
<view class="flex-list-name-author">歌手: {{item.author}}</view>
</view>
<view class="flex-list-icon">
<image class="flex-list-icon-img" src="../../static/i_2.png" mode="" v-if="active === index"></image>
<image class="flex-list-icon-img" src="../../static/i_4.png" mode="" v-else></image>
</view>
</view>
</scroll-view>
</view>
</template>
<script>
import { formatSeconds } from '../../utils/util.js'
export default {
data() {
return {
erCodeId:1,// 二维码传递ID
progressTime:'00:00',
progress:0, //播放进度
active: 0,
audioAction: {
method: 'pause'
},
current: {},
audioList: [{
src: '../../audio/a_1.mp3',
name: '你是我内心的一首歌',
author: '王力宏',
isPlay: false,
id: 1
},
{
src: '../../audio/a_2.mp3',
name: '重庆时间',
author: '重庆孩子乐队',
isPlay: false,
id: 2
},
{
src: '../../audio/a_3.mp3',
name: '成都',
author: '赵雷',
isPlay: false,
id: 3
},
{
src: '../../audio/a_4.mp3',
name: '广东爱情故事',
author: '广东雨神',
isPlay: false,
id: 4
},
{
src: '../../audio/a_5.mp3',
name: '苏州情书',
author: '韩雪',
isPlay: false,
id: 5
},
{
src: '../../audio/a_6.mp3',
name: '你不在南京',
author: '南游记乐队',
id: 6
},
{
src: '../../audio/a_7.mp3',
name: '欢喜侬',
author: '顶楼的马戏团',
isPlay: false,
id: 7
},
{
src: '../../audio/a_8.mp3',
name: '太原后生谝山西',
author: '田野',
isPlay: false,
id: 8
},
{
src: '../../audio/a_9.mp3',
name: '这里是宁波',
author: '冯圣雅',
isPlay: false,
id: 9
},
{
src: '../../audio/a_10.mp3',
name: '话说老沈阳',
author: '朱晓红',
id: 10
},
{
src: '../../audio/a_11.mp3',
name: '长春',
author: '李玉刚',
isPlay: false,
id: 11
},
{
src: '../../audio/a_12.mp3',
name: '北京北京',
author: '王峰',
isPlay: false,
id: 12
}
],
interval: 0,
innerAudioContext: null, // 音频对象
isPlay: true
}
},
onLoad({id}) {
this.innerAudioContext = uni.createInnerAudioContext();
this.erCodeId = id ? Number(id) : 1;
this.playAaudio(this.erCodeId,this.audioList.findIndex(ele=>ele.id===this.erCodeId))
},
methods: {
// 上一首 下一首
autoPlay(type) {
// 如果点击过快,则不执行操作
let timer = Date.parse(new Date());
if (timer - this.interval < 500) return;
this.interval = timer;
// type > 0 --> 下一首
if (type > 0) {
if (this.active === 11) {
this.playAaudio(this.audioList[0].id, 0)
} else {
this.playAaudio(this.audioList[this.active + 1].id, this.active + 1)
}
} else {
if (this.active === 0) {
this.playAaudio(this.audioList[11].id, 11)
} else {
this.playAaudio(this.audioList[this.active - 1].id, this.active - 1)
}
}
},
// 暂停和继续播放
isParse() {
// 如果点击过快,则不执行操作
let timer = Date.parse(new Date());
if (timer - this.interval < 500) return;
if(!this.current.src){
this.playAaudio(this.erCodeId,this.audioList.findIndex(ele=>ele.id===this.erCodeId))
}
// 播放中,暂停
if (this.isPlay) {
this.innerAudioContext.pause();
} else {
this.innerAudioContext.play();
}
this.isPlay = !this.isPlay;
},
playAaudio(id, index = 0) {
// 如果是当前播放歌曲,重复点击无效
if(index === this.active) return;
this.current = this.audioList.filter(ele => ele.id === id)[0];
this.active = index;
if (this.innerAudioContext) {
this.innerAudioContext.destroy();
}
this.innerAudioContext = uni.createInnerAudioContext();
this.innerAudioContext.autoplay = true;
uni.showLoading({
title:'缓冲中...'
})
// 每次播放 更新进度条
this.progressTime = '00:00';
this.progress = 0;
// 自动播放
this.innerAudioContext.src = `http://47.96.229.18:8083/audio/a_${id}.mp3`;
this.innerAudioContext.onPlay(() => {
uni.hideLoading();
console.log('开始播放');
});
// 音频加载中
this.innerAudioContext.onWaiting = (() => {
console.log('加载中')
uni.showToast({
title: '网络有点不给力,全力加载中...',
icon: 'none',
duration: 1500
})
})
// 音频播放进度
this.innerAudioContext.onTimeUpdate(() => {
this.progress = Math.floor(this.innerAudioContext.currentTime / this.innerAudioContext.duration * 100);
this.progressTime = formatSeconds(this.innerAudioContext.currentTime);
})
// 如果播放完成,自动播放下一首
this.innerAudioContext.onEnded = (() => {
console.log('播放完毕.切换下一首')
this.autoPlay(1)
})
this.innerAudioContext.onError = ((err) => {
console.log(err, '')
})
// 音频准备就绪
this.innerAudioContext.onCanplay = (()=>{
console.log('准备就绪');
})
}
}
}
</script>
2 个回复
1***@qq.com
我的是异步传入音频地址还没播放就又执行了onEnded方法
DCloud_UNI_Anne
请升级至HBuilderX3.5.0-alpha 并用示例代码hello uni-app试下能出现你的问题吗?【bug优先处理规则】https://ask.dcloud.net.cn/article/38139