js播放音频文件总结

js播放音频文件

最近在做一个英语听力的个人玩的项目,需要用js来播放mp3文件。从网络上搜到了好多种解决方案。

总结如下:

Audio Player

特点:

(1)必须是轻量级的、可定制的、正确的。

(2)必须能解决当前的问题,比如响应式的、支持触摸操作的。

(3)必须解决了我目前没解决的问题。

audio-player-responsive-and-touch-friendly-1.jpg

这个是jQuery的插件形式的实现,具有:响应式的、 可触摸操作、自适应的、 原生的、 实用的特点,并且是没有图片元素,完全采用css3来绘制完成,样式也很赞。无Flash,这个解决了新版本的chrome不支持flash的大问题。

但是这个有一个比较大的问题,不支持LRC文件。

Jplayer

jPlayer是一个JavaScript写的完全免费和开源 (MIT) 的jQuery多媒体库插件 (现在也是一个Zepto插件) jPlayer可以让你迅速编写一个跨平台的支持音频和视频播放的网页. jPlayer的丰富API可以让你创建一个个性化多媒体应用,因此也获得越来越多的社区成员的支持和鼓励。

特点:

  • 简单:几分钟就可以上手编码、部署
  • 可定制:可以方便地用HTML和CSS换肤
  • 轻量:压缩的mini版只有12K
  • 免费开源:没有任何许可限制
  • 社区支持:不断增长的活跃社区
  • 插件丰富:主流平台上越来越多的免费插件
  • 跨平台:跨平台跨浏览器多解码器支持
  • 文档全面:完善的文档和入门指南
  • 接口统一:提供兼容浏览器、HTML5和Flash的统一接口
  • 扩展性:拥有高扩展性的架构体系

支持多中浏览器:

  • Windows: Chrome, Firefox, Internet Explorer, Safari, Opera
  • Windows (legacy): IE6, IE7, IE8, IE9, IE10, IE11
  • OSX: Safari, Firefox, Chrome, Opera
  • iOS: Mobile Safari: iPad, iPhone, iPod Touch
  • Android: Android 2.3 Browser
  • Blackberry: OS 7 Phone Browser, PlayBook Browser 这个也是一个jQuery的插件形式的实现。我感觉这个比较符合我的要求,但是他的样式实现没有Audio Player 那么优雅,但是可以支持自定义的theme,我决定把Audio Player 的样式用于jplayer。 并且实现一个带有歌词同步的项目,期待我的实现吧。 可以先看一下初步版本: http://www.yingyuke.net/jplayer/

APlayer

APlayer 是这里颜值最高的一个播放器。

体验地址:https://aplayer.js.org/#/

这个写的太好了,我只是学习了一下这个播放器的实现。暂时还没有应用到我的项目中。

image.png

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

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

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏QQ会员技术团队的专栏

【开源公告】VasSonic轻量级的高性能的Hybrid框架正式开源

VasSonic取名于索尼动画形象音速小子,是腾讯QQ会员 VAS团队研发的一个轻量级的高性能的Hybrid框架,专注于提升页面首屏加载速度,完美支持静态直出页...

2326
来自专栏SEO

页脚、内容和导航中的链接如何影响SEO?

29611
来自专栏程序员宝库

Chrome 常用插件 前端-后端-产品

俗话说chrome没有插件只有四成能力,可见插件才是chrome的牛逼之处。 前提:要想直接使用Google的应用商店需要先本地添加: 谷歌访问助手插件:(下载...

43716
来自专栏程序你好

10个基于web的JavaScript最优秀的应用程序库和框架

在所有可用于创建web应用程序的语言中,JavaScript可能是最健壮的库和框架选择。事实上,有太多的东西,很难弄清楚该用哪一个,尤其是当你刚刚开始的时候。

1122
来自专栏前端大白专栏

带来一个react插件的使用方式---- video-react

4365
来自专栏Python爬虫与算法进阶

为什么不推荐Selenium写爬虫

最近在群里经常会看到有些朋友说,使用Selenium去采集网站,我看到其实内心是很难受的,哎!为什么要用Selenium呢? 我想说下自己的看法,欢迎各位大佬批...

3876
来自专栏编程微刊

微信小程序从零开始开发步骤(八)引入框架WeUI

4374
来自专栏张戈的专栏

关于网站图标favicon.ico那点事儿,你造吗?

众所周知,联盟成员导航是中国博客联盟的特色之一。而网站图标则是导航的装饰之一,起到锦上添花的作用,让页面更精美耐看。 但是随着成员数量的增长,图标便成了页面的拖...

8236
来自专栏腾讯开源的专栏

WeFlow 也来了

简介 WeFlow 是一个开源、跨平台、可定制的前端开发工作流工具。 使用场景 在前端团队进行网页重构和网页开发过程中,使用 WeFlow 工具执行自动化的流程...

4427
来自专栏静晴轩

Html<a>标签href的困惑记载

近日,在工作中遇到一个小问题(给手游平台做些网页活动,其中牵涉到一个按钮链接,就习以为常的用了<a>标签,Click响应之后走一段js代码逻辑-弹出一个分享微信...

4675

扫码关注云+社区

领取腾讯云代金券