vue项目pc端的audio组件--vue-audio

Dear 丶 2023-03-02 10:53 120阅读 0赞

demo：https://shershen08.github.io/vue-plugins-demo-static/index.html\#/sound  
NPM：https://www.npmjs.com/package/vue-audio

--------------------

下载依赖：

npm install vue-audio --save

引入使用：

<vue-audio :file="file1" />
    
    import VueAudio from 'vue-audio';
    
    data() {
      return {
        file1: require('../../assets/audio/audio002.mp3'),
      };
    },
    components: {
      'vue-audio': VueAudio
    }

展示：  
![在这里插入图片描述][20200729094635856.png]  
最后那个按钮调节音量大小的。

--------------------

当然上面是简单的，而且比较不美观，适用于对界面要求不强的项目，那么想要好看的，例如这样的：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70]

[那么看看这篇博客吧][Link 1]、[这是博客的项目地址][Link 2]

[如果你需要一个小型的音乐播放器，还有Vue-APlayer是看起来比较美的][Vue-APlayer]，这是[demo地址][demo]：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 1]

[20200729094635856.png]: /images/20230208/1595c18f2ff7423cb8f4a0d0847a5f67.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70]: /images/20230208/19dac4a07a11432886fe6de320b5a8b0.png
[Link 1]: https://segmentfault.com/a/1190000012453975
[Link 2]: https://github.com/wangduanduan/element-audio
[Vue-APlayer]: https://github.com/SevenOutman/vue-aplayer
[demo]: https://vue-aplayer.js.org/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 1]: /images/20230208/06e4ac8fd52444a7a49bf9cb917ec431.png