@worstone/vue-aplayer

1.0.6 • Public • Published

vue

Vue-APlayer

Vue 3.x for APlayer.

项目地址:Vue-APlayer

演示地址:Demo

介绍

使用 Vue 3.x 参考 APlayer 以及 Vue-APlayer 重构的 APlayer。

项目中可能存在一些没有发现的问题,如有发现欢迎反馈。

在您的项目中使用 Vue-APlayer?让我知道!

使用方法

<template>
	<APlayer :audio="audio" />
</template>
<script setup>
    import { ref } from "vue";
	import APlayer from "@worstone/vue-aplayer";
    const audio = ref([]);

    onMounted(() => {
        // 加载歌曲信息并更新 audio
        audio.value = [];
    });
</script>

由于组件初始化时,歌曲信息为空,所以会加载默认的样式,在歌曲信息获取后自动进行更新。

如果想要更好的体验,则参考下面的方式使用。

<template>
	<APlayer :audio="audio" ref="aplayer" />
</template>
<script setup>
    import { ref } from "vue";
	import APlayer from "@worstone/vue-aplayer";
    
    const aplayer = ref(null);
    // 设置 2 个或 2 个以上的歌曲信息
    const audio = ref([]);

    onMounted(() => {
        // 加载歌曲信息
        let audios = [];
        aplayer.value.addList(audios);
    });
</script>

Docs

中文文档

参考

  • APlayer : 🍭 Wow, such a beautiful HTML5 music player.
  • Vue-APlayer : Vue 2.x implementation of APlayer prototype.

作者

Vue-APlayer © WorstOne,在 MIT 许可下发布。

主页 - WorstOne · 博客 - Live For Code · 仓库 - Github

Package Sidebar

Install

npm i @worstone/vue-aplayer

Weekly Downloads

263

Version

1.0.6

License

MIT

Unpacked Size

296 kB

Total Files

8

Last publish

Collaborators

  • o0o0o