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

今天突然想用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的播放器出来吗?

本文分享自微信公众号 - web前端教室(webfeel)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-02-03

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏极乐技术社区

微信小程序开放关键词搜索,让你的小程序更快被找到

怎样可以找到一个想用的小程序?可能是线下扫码、公众号、好友分享、长按小程序码、搜索小程序名称…… 今天起,多了一个新方式——小程序后台新增自定义关键词功能: 已...

22590
来自专栏腾讯大讲堂的专栏

你好,我是小程序【正式上线】

2017年1月9日,小程序如约而至。 小程序究竟该如何获取?首先,你需要将微信更新至iOS6.5.3版本或Android6.5.3版本,其次,你得尝试使用一个小...

26150
来自专栏ytkah

微信公众平台数据接口开始内测

微信公众平台每天的数据量越来越庞大了,新年红包再次延迟逐显服务器压力,微信也慢慢开放一些接口给第三方平台,这不,今天微信公众平台数据接口开始公测了。微信公众平台...

41250
来自专栏京东技术

京东物流性能测试理论梳理 ——性能测试的正确打开方式

京东全球年中购物节火热进行中,2018年6月1日0点到6月18日24点累计下单金额达1592亿元,出库订单金额同比增长超过37%!618期间,90%以上自营订单...

23420
来自专栏腾讯移动品质中心TMQ的专栏

腾讯TMQ在线沙龙回顾|测试左移实践

测试左移实践 活动时间:2017年6月28日 QQ群视频交流 活动主题:TMQ在线沙龙第二十三期分享 本次分享的主题是:测试左移实践 共有214位测试小伙伴报名...

23480
来自专栏韩伟的专栏

经典软件架构模式

目录 (一) 架构模式是什么 (二) 分层模式案例 (三) 微核模式案例 (四) 管道与过滤器案例 (五) MVC模式案例 (六) REST模式案例 (七) S...

45850
来自专栏小狼的世界

关于框架的一些思考

如果你的团队很小并且在软件开发领域也没什么经验,那么放下包袱使用开源框架吧(OSS Framework),但是如果你有一个很大而且有丰富经验的团队,那么最好还是...

10030
来自专栏WeTest质量开放平台团队的专栏

【iOS性能测试工具】五步快速上手指南

WeTest 提供的iOS性能测试工具包括兼容测试、性能测试、功能测试等,测试结果包括CPU消耗、内存消耗、Log日志、错误原因及分析。

51620
来自专栏企鹅号快讯

高可用性的前生今世

题记:今天是2018年1月1日,这是一个特殊的日子,民间称为“三头”,意思是周头、月头、年头;我把它称为“3A”,指Kerberos协议的3A。无独有偶的是今年...

23970
来自专栏林德熙的博客

win10 UWP 你写我读

想要电脑读出我们写的内容,在win10,很简单 其实这个技术在windows7就有了,但是现在 win10 写出一个你写我读的软件很简单。 我们需要一个类 Me...

9910

扫码关注云+社区

领取腾讯云代金券