前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【从零开始】用vuejs做一个简陋但好使的播放器(一)

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

作者头像
web前端教室
发布2018-02-07 09:22:24
1.1K0
发布2018-02-07 09:22:24
举报
文章被收录于专栏: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的播放器出来吗?

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2018-02-03,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 web前端教室 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档