从零开始用vuejs做一个简陋但好使的播放器

Posted 2021-05-01 web前端教室

今天突然想用vueJs做一个播放器。网上有许多现成的，但我又懒得去看别人的代码。怎么办呢？先【从零开始】做一个最简单的吧。

<!-- 一、需求 -->

用vueJs做一个播放器。

<!-- 二、分析需求 -->

主要有二个点：

1、vuejs；

2、播放器；

<!-- 三、功能划分 -->

1、vueJs，可以使用vue-cli来搞定；

2、所谓播放器，无非是h5的<audio></audio>标签而已。

<!-- 四、最简单实现 -->

1、安装vue-cli；

2、复制helloworld.vue，改一个play.vue出来；插入<audio></audio>标签，并在src那时写入mp3的链接；

vueJs版本的播放器，ok了，哈哈。

<!-- 五、自定义按钮 -->

1、二个input标签，写播放和暂停。调用，

播放器id.play();

播放器id.pause();

<!-- 六、数据来源 -->

1、使用nodeJs的express；

2、app.get()设置路由；

3、res.send()返回相应数据；

<!-- 七、getMouseData() -->

vueJs中使用axios获取数据，回调设置：播放器id.src，然后.play();

<!-- 八、点击歌曲列表切换 -->

1、v-for生成列表，添加@click事件；

2、点击某条歌曲调用“切歌(inx)”，传入inx索引；

3、根据inx索引重新设置“播放器id.src值”；

4、播放器id.play();

5、成品...

<!-- 更多... -->

天晚了，明天再写吧。

没做的时候，我以为播放器会很难，其实，我只用了五分钟不到就写了一个vueJs播放器的原型出来，然后扩展了上述那些功能。

为什么没有贴代码呢？

因为网上的代码已经太多了，但讲设计思路的几乎没有。

如果你看到这里，如果你也会vueJs和node，那么你能根据这个思路，写一个vueJs的播放器出来吗？