一款开箱即用的Vue音频组件

之前遇到做一个音乐播放器的组件的需求，本来想偷懒，但是没有在网上找到合适的，找到的一些组件样式比较花哨，功能不全，所以一直想自己实现一个可以做到开箱即用的组件。

npm地址

github地址

组件功能

• 基础音乐播放暂停切歌
• 显示音乐缓存进度
• 显示音乐列表
• 进度条拖动
• 音量控制

组件预览

在线预览地址

组件使用

安装

npm i @jhao413/vue-audio-player

main.js

import audioPlayer from './utils/vue-audio-player'

Vue.use(audioPlayer)

组件

music-list为必填参数

<template>
  <div id="app">
    <audio-player :music-list="list"></audio-player>
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      list: [
        {
          name: '可惜没如果',
          url: 'http://xxx.mp3',
          img:
            'http://p3.music.126.net/QXZRckFTN5375vdQSyG0jA==/109951166919095160.jpg?param=300x300',
          singer: '林俊杰',
        },
      ],
    }
  },
}
</script>

打算实现的功能

如果大家有更多的想法欢迎评论

• 点击音量图标静音
• 组件最小化

结语

第一次写前端组件，代码可能也会有一些错误的地方，希望各位大佬们批评指正（还能点个star就更好了(๑•̀ㅂ•́)و✧）

如果大佬们有应届生的前端岗位希望捞捞弟弟〒▽〒