uniApp实现音乐播放器
<style>
.content {
background-color: #fafafa;
display: flex;
flex-direction: column;
align-items: center;
}
.audio-info {
width: 650upx;
height: 50upx;
line-height: 50upx;
padding: 0 55px;
color: #333;
text-align: center;
position: absolute;
top: 25px;
}
.audio-title {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.player-slider {
width: 650upx;
height: 50upx;
display: flex;
align-items: center;
justify-content: space-between;
position: absolute;
top: 50px;
}
.player-slider .player-currentTime,
.player-slider .player-duration {
width: 40px;
height: 100%;
font-size: 10px;
color: #c1c1c1;
line-height: 44upx;
}
.slider {
flex: 1;
}
.play-bar {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 70upx;
font-size: 30px;
position: absolute;
top: 75px;
}
.play-menu {
width: 100upx;
height: 100upx;
border: 1px solid #333;
border-radius: 50%;
text-align: center;
line-height: 100upx;
}
</style>
<template>
<view class="content">
<view class="audio-info">
<p class="audio-title">
<span style="font-size: 14px;">{{musicList[this.isMusic]["title"]}}</span>
<span style="padding: 0 4px;">-</span>
<span style="font-size: 12px;">{{musicList[this.isMusic]["author"]}}</span>
</p>
</view>
<view class="player-slider">
<view class="player-currentTime">
{{chCurrentTime[0]}}:{{chCurrentTime[1]}}
</view>
<slider class="slider" min="0" :max="duration" :value="currentTime" activeColor="#b6b6b6" backgroundColor="#dedede"
block-size="12" @change="changeProgress" />
<view class="player-duration">
{{chDuration[0]}}:{{chDuration[1]}}
</view>
</view>
<!-- playbar -->
<view class="play-bar">
<view class="">
<text style="color: #333;" class="text-white cuIcon-backwardfill" @tap="previousMusic"></text>
</view>
<view class="play-menu">
<text style="color: #333;" class="text-white cuIcon-playfill" :class="ifPlay?'cuIcon-stop':'cuIcon-playfill'" @tap="playMusic"></text>
</view>
<view class="">
<text style="color: #333;" class="text-white cuIcon-play_forward_fill" @tap="nextMusic"></text>
</view>
</view>
<viwe class="play-list">
<view class="play-list-title">
</view>
</viwe>
</view>
</template>
<script>
const audioContext = uni.createInnerAudioContext();
audioContext.autoplay = false;
export default {
data() {
return {
optList: [{
'id': 0,
'icon': 'cuIcon-like'
}, {
'id': 1,
'icon': 'cuIcon-down'
}, {
'id': 2,
'icon': 'cuIcon-notice'
}, {
'id': 3,
'icon': 'cuIcon-message'
}, {
'id': 4,
'icon': 'cuIcon-moreandroid'
}, ],
duration: '100',
currentTime: '0',
chDuration: ['0', '00'],
chCurrentTime: ['0', '00'],
ifPlay: false,
musicList: [
{
"title": "我好像在哪见过你",
"url": "https://win-web-rh01-sycdn.kuwo.cn/0a869ece10f1ed5c865aca5880f45bbe/5e88452d/resource/n1/67/18/3604884148.mp3",
"author": "薛之谦"
},{
"title": "认真的雪",
"url": "https://win-web-ra01-sycdn.kuwo.cn/14b879b2dc99e6c57c6c3dcf398fe6cc/5e8844ac/resource/n1/128/25/81/3430312082.mp3",
"author": "薛之谦"
},
{
"title": "演员",
"url": "https://win-web-rf01-sycdn.kuwo.cn/ca718b361e73b14060159b308ec68a7a/5e8843e9/resource/n3/55/26/3051054552.mp3",
"author": "薛之谦"
}, {
"title": "丑八怪",
"url": "https://win-web-rf01-sycdn.kuwo.cn/ca718b361e73b14060159b308ec68a7a/5e8843e9/resource/n3/55/26/3051054552.mp3",
"author": "薛之谦"
}, {
"title": "你还要我怎样",
"url": "https://sy-sycdn.kuwo.cn/71d432d571d12a64abad7e5d2f303521/5e8844fb/resource/n3/22/98/1457620614.mp3",
"author": "薛之谦"
}
],
isMusic: 0
}
},
mounted() {
this.init();
},
methods: {
init() {
audioContext.src = this.musicList[this.isMusic]["url"];
},
// 时间初始化
isTimeInit() {
self = this
self.duration = "100";
self.currentTime = '0';
self.chDuration = ['0', '00'];
self.chCurrentTime = ['0', '00'];
},
// 播放/暂停
playMusic(type = "click") {
self = this
if (self.ifPlay && type !== "auto") { //暂停
self.isPause();
} else { //开始
self.isPlay();
}
},
// 暂停
isPause() {
self = this
self.ifPlay = false;
audioContext.pause();
},
// 开始
isPlay() {
self = this
self.ifPlay = true;
audioContext.play();
self.changeTime()
self.onEndMusic()
},
// 更新进度
changeTime() {
var self = this;
audioContext.onTimeUpdate((res) => {
self.currentTime = audioContext.currentTime;
self.chCurrentTime[0] = Math.floor(Math.floor(audioContext.currentTime) / 60);
var time = Math.floor(audioContext.currentTime) % 60;
self.$set(self.chCurrentTime, 1, time < 10 ? "0" + String(time) : time);
if (isNaN(audioContext.duration)) {
self.isTimeInit();
} else if (audioContext.duration != self.duration) {
self.duration = audioContext.duration;
self.chDuration[0] = Math.floor(Math.floor(audioContext.duration) / 60);
var d_time = Math.floor(audioContext.duration) % 60;
self.chDuration[1] = d_time < 10 ? "0" + String(d_time) : d_time;
}
console.log(audioContext.currentTime)
})
},
// 当前播放结束
onEndMusic() {
self = this
audioContext.onEnded((res) => {
self.nextMusic()
})
},
// 上一个
previousMusic() {
self = this
self.isPause();
self.isTimeInit();
if (self.isMusic == 0) {
alert("已经是第一首歌了")
} else {
self.isMusic -= 1;
self.init();
self.playMusic("auto")
}
},
// 下一个
nextMusic() {
self = this
self.isPause();
self.isTimeInit();
if (self.isMusic == ((this.musicList.length) - 1)) {
alert("已经是最后一首歌了")
} else {
self.isMusic += 1;
self.init();
self.playMusic("auto")
}
},
// 进度条拖动
changeProgress(e) {
audioContext.seek(e.detail.value);
this.ifPlay = false;
this.playMusic();
},
}
}
</script>本文为Jsky原创文章,转载无需和我联系,但请注明来自Jsky博客 www.tjin.link
- 上一篇： Golang 解决 golang.org/x/ 下包下载不下来的问题
- 下一篇： Go输出中文乱码
请先登录后发表评论
- 最新评论
- 总共0条评论
