@langnang/vue-audio-player v0.1.9

vue-audio-player

Vue 音频播放器组件

安装

npm i -S @langnang/vue-audio-player

按需引入

import { AudioPlayer } from "@langnang/vue-audio-player";
import "@langnang/vue-audio-player/lib/vue-audio-player.css";

components: {
  AudioPlayer
}

全局引入

import AudioPlayer from "@langnang/vue-audio-player";
import "@langnang/vue-audio-player/lib/vue-audio-player.css";

Vue.use(AudioPlayer);

使用

<template>
  <div>
    <AudioPlayer
      :src-list="audioList"
      @play-prev="onPlayPrev"
      @play-next="onPlayNext"
    />
  </div>
</template>

<script>
  import { AudioPlayer } from "@langnang/vue-audio-player";
  import "@langnang/vue-audio-player/lib/vue-audio-player.css";

  export default {
    components: {
      AudioPlayer,
    },
    data() {
      return {
        audioList: [
          "https://96.f.1ting.com/local_to_cube_202004121813/96kmp3/zzzzzmp3/2015kNov/20X/20m_MingX/01.mp3",
          "https://96.f.1ting.com/local_to_cube_202004121813/96kmp3/2020/08/25/25a_pyc/01.mp3",
          "https://96.f.1ting.com/local_to_cube_202004121813/96kmp3/2020/08/13/13d_jtq/01.mp3",
          "https://96.f.1ting.com/local_to_cube_202004121813/96kmp3/2020/08/13/13s_ylf/01.mp3",
          "https://96.f.1ting.com/local_to_cube_202004121813/96kmp3/2020/08/13/13r_ylf/01.mp3",
        ],
      };
    },
    methods: {
      onPlayPrev: function(index) {
        console.log("onPlayPrev", index);
      },
      onPlayNext: function(index) {
        console.log("onPlayNext", index);
      },
    },
  };
</script>

Attributes

Events

Methods

参考

• HTML 标签 | W3school
• HTML DOM Audio 对象 | W3scool
• https://github.com/1014156094/vue-audio-player