<template>
<view class="imt-audio">
<view class="audio-wrapper">
<view class="audio-number">{{format(current)}}</view>
<slider class="audio-slider" :activeColor="color" block-size="16" :value="current" :max="duration" @changing="seek=true,current=$event.detail.value" @change="audio.seek($event.detail.value)"></slider>
<view class="audio-number">{{format(duration)}}</view>
</view>
<view class="audio-control-wrapper" :style="{color}">
<view class="audio-control audio-control-prev" v-if="control" :style="{borderColor:color}" @click="prev"></view>
<view class="audio-control audio-control-switch" :class="{audioLoading:loading}" :style="{borderColor:color}" @click="audio.paused?play():audio.pause()">{{loading?'':(paused?'':'')}}</view>
<view class="audio-control audio-control-next" v-if="control" :style="{borderColor:color}" @click="next"></view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
audio: uni.createInnerAudioContext(),
current: 0, //当前进度(s)
duration: 0, //总时长(s)
paused: true, //是否处于暂停状态
loading: false, //是否处于读取状态
seek: false //是否处于拖动状态
}
},
props: {
src: String, //音频链接
autoplay: Boolean, //是否自动播放
continue: Boolean, //播放完成后是否继续播放下一首,需定义@next事件
control: {
type: Boolean,
default: true
}, //是否需要上一曲/下一曲按钮
color: {
type: String,
default: '#169af3'
} //主色调
},
methods: {
//返回prev事件
prev() {
this.$emit('prev')
},
//返回next事件
next() {
this.$emit('next')
},
//格式化时长
format(num) {
return '0'.repeat(2 - String(Math.floor(num / 60)).length) + Math.floor(num / 60) + ':' + '0'.repeat(2 - String(Math.floor(num % 60)).length) + Math.floor(num % 60)
},
//点击播放按钮
play() {
this.audio.play()
this.loading = true
}
},
created() {
if (this.src) {
this.audio.src = this.src
this.autoplay && this.play()
}
this.audio.obeyMuteSwitch = false
//音频进度更新事件
this.audio.onTimeUpdate(() => {
if (!this.seek) {
this.current = this.audio.currentTime
}
if (!this.duration) {
this.duration = this.audio.duration
}
})
//音频播放事件
this.audio.onPlay(() => {
this.paused = false
this.loading = false
})
//音频暂停事件
this.audio.onPause(() => {
this.paused = true
})
//音频结束事件
this.audio.onEnded(() => {
if (this.continue) {
this.next()
} else {
this.paused = true
this.current = 0
}
})
//音频完成更改进度事件
this.audio.onSeeked(() => {
this.seek = false
})
},
beforeDestroy(){
this.audio.destroy()
},
watch: {
src(src, old) {
this.audio.src = src
this.current = 0
this.duration = 0
if (old || this.autoplay) {
this.play()
}
}
}
}
</script>
<style>
@font-face {
font-family: 'icon';
src: url('//at.alicdn.com/t/font_1104838_fxzimc34xw.eot');
src: url('//at.alicdn.com/t/font_1104838_fxzimc34xw.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_1104838_fxzimc34xw.woff2') format('woff2'),
url('//at.alicdn.com/t/font_1104838_fxzimc34xw.woff') format('woff'),
url('//at.alicdn.com/t/font_1104838_fxzimc34xw.ttf') format('truetype'),
url('//at.alicdn.com/t/font_1104838_fxzimc34xw.svg#iconfont') format('svg');
}
.imt-audio {
padding: 30upx 0;
background: #fff;
border-radius: 20upx;
}
.audio-wrapper {
display: flex;
align-items: center;
}
.audio-number {
width: 120upx;
font-size: 24upx;
line-height: 1;
color: #333;
text-align: center;
}
.audio-slider {
flex: 1;
margin: 0;
}
.audio-control-wrapper {
margin-top: 20upx;
display: flex;
justify-content: center;
align-items: center;
font-family: "icon" !important;
}
.audio-control {
font-size: 32upx;
line-height: 1;
border: 4upx solid;
border-radius: 50%;
padding: 16upx;
}
.audio-control-next {
transform: rotate(180deg);
}
.audio-control-switch {
font-size: 40upx;
margin: 0 100upx;
}
.audioLoading {
animation: loading 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes loading {
to {
transform: rotate(360deg);
}
}
</style>
没有合适的资源?快使用搜索试试~ 我知道了~
(微信小程序)音频播放器
共2个文件
vue:2个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 32 浏览量
2023-03-27
17:50:54
上传
评论
收藏 3KB ZIP 举报
温馨提示
微信小程序播放器插件,可展示播放状态、拖动进度、切换上下首、自动播放、自动切歌 1.src: String 音频链接 必须 2.autoplay: Boolean 是否自动播放 默认false 3.continue: Boolean 播放完成后是否继续播放下一首,需定义@next事件 默认false 4.control: Boolean 是否需要上一曲/下一曲按钮 默认true 5.color: String 主色调 默认#169af3 6.@prev:点击上一首按钮 7.@next:点击下一首按钮 目前只在微信小程序上运行过,其他平台暂未测试
资源推荐
资源详情
资源评论
收起资源包目录
imt-audio_1.2.zip (2个子文件)
pages
index
index.vue 2KB
components
imt-audio
imt-audio.vue 5KB
共 2 条
- 1
资源评论
瑆箫
- 粉丝: 1255
- 资源: 137
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功