Vue 音频播放器组件
特性
支持 Vue2 和 Vue3
简单实用
通用性高
支持进度条拖拽
支持 PC 端和移动端
完善的文档和示例
使用
第一步
npm i -S @liripeng/vue-audio-player
第二部
// 全局引入import AudioPlayer from '@liripeng/vue-audio-player'Vue.use(AudioPlayer)
或者
// 局部引入import AudioPlayer from '@liripeng/vue-audio-player'components: {AudioPlayer}
第三步
<template><div>{{currentAudioName || audioList[0].name }}<audio-playerref="audioPlayer":audio-list="audioList.map(elm => elm.url)":before-play="handleBeforePlay"theme-color="#ff2929"/></div></template><script>export default {data() {return {currentAudioName: '',audioList: [{name: '音频1',url: '/upload/dance/F25F74A0B8FF82503241801D0E2CA5CD.mp3'},{name: '音频2',url: '/upload/dance//C719452E3C783408000766EA968E.mp3'}]}},methods: {// 播放前做的事handleBeforePlay(next) {// 这里可以做一些事情...this.currentAudioName = this.audioList[this.$refs.audioPlayer.currentPlayIndex].namenext() // 开始播放}}}</script>
