https://github.com/realgeoffrey/vue-player-audio

播放音频文件，支持设置播放时间区间（Vue@2组件）
https://github.com/realgeoffrey/vue-player-audio

audio vue

Last synced: 18 days ago
JSON representation

播放音频文件，支持设置播放时间区间（Vue@2组件）

• Host: GitHub
• URL: https://github.com/realgeoffrey/vue-player-audio
• Owner: realgeoffrey
• License: mit
• Created: 2019-12-06T10:03:47.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-03-29T04:33:20.000Z (over 1 year ago)
• Last Synced: 2024-09-21T13:54:38.639Z (about 2 months ago)
• Topics: audio, vue
• Language: Vue
• Homepage: https://realgeoffrey.github.io/vue-player-audio/demo/index.html
• Size: 10.7 KB
• Stars: 13
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vue-player-audio

播放音频文件，支持设置播放时间区间（Vue@2组件）

1. npm：

2. demo：

### 安装

1. Node.js安装

    ```bash

    npm install vue-player-audio --save

    ```

2. 浏览器引用

    ```html

    

    

    ```

### 注册组件

1. Node.js注册

    1. 全局注册

        ```javascript

        import Vue from 'vue'

        import vuePlayerAudio from 'vue-player-audio'

        // 全局注册

        Vue.use(vuePlayerAudio, { component: 'PlayerAudio' }) // 组件名默认是：vue-player-audio

        // 或：Vue.component('PlayerAudio', vuePlayerAudio)

        ```

    2. 局部注册

        ```javascript

        import vuePlayerAudio from 'vue-player-audio'

        export default {

          components: {

            // 局部注册

            PlayerAudio: vuePlayerAudio

          }

        }

        ```

2. 浏览器注册

    1. 全局注册

        ```html

        

        

        

        // 全局注册

        Vue.use(vuePlayerAudio, { component: 'vue-player-audio' }) // 组件名默认是：vue-player-audio

        // 或：Vue.component('vue-player-audio', vuePlayerAudio)

        

        ```

    2. 局部注册

        ```html

        

        

        

        new Vue({

          components: {

            // 局部注册

            'vue-player-audio': vuePlayerAudio

          }

        })

        

        ```

### 用法

1. 参数

    ```vue

    

    ```

    >因为兼容性问题，`end-second`与`start-second`最少间隔1秒，`loop-gap-millisecond`最少设置50毫秒。

2. 插槽

    ```vue

    

      


      是否在播放：{{ audioData.isPlaying }}

      


      当前时间：{{ audioData.currentSecond }}

      


      最大时间：{{ audioData.maxSecond }}

      


    

    ```

>可使用[audiosprite](https://github.com/tonistiigi/audiosprite)等音频组合工具把多个音频文件组合成一个，然后再使用本插件的音频播放时间区间，从而减少请求数。