专栏首页jerryteng的专栏js播放音频文件总结
原创

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 条评论
登录 后参与评论

相关文章

  • 如何编写好的单元测试

    单元测试,首先要明确这个单元,从一个单一方法到整个类都可以是一个单元,单元测试就是针对这个单元所写的测试用例。

    jerryteng
  • 学习Go语言-GOPATH有多工作区的问题

    首先在查找依赖包的时候,总是会先查找 GOROOT目录,也就是go语言的安装目录,如果没有找到依赖的包,才到工作区去找相应的包。

    jerryteng
  • 学习Go语言-组织源码文件

    jerryteng
  • SpringBoot的@Value注解设置默认值

    在Spring Boot中,如果使用@Value注解对属性进行赋值,但如果在配置文件或启动参数中未指定对应的参数值,则会抛出异常。异常信息往往是对应注入属性的类...

    用户1161110
  • 图解德鲁克强调的管好自己的六个重要维度

    用户1756920
  • 百年经典:法约尔对未来工程师的建议

    你们将幸福地想到自己终于是有用之才了,你们有理由希望通过劳动获得令人尊重的地位。   你们将来需要的素质并非完全是今天让你们名列前茅的那些东西。比如健康,行...

    机器人网
  • python3的web服务质量探测(文章

    py3study
  • 微软因云服务的高增长超越苹果,成全球第一大市值公司

    在11月23日周五盘中至收盘,微软市值正式超过苹果,成为世界上市值最高的公司。收盘时,微软市值为7533.4亿美元,苹果市值为7468.2亿美元,亚马逊市值为7...

    CloudBest
  • SAP最佳业务实践:按库存生产(145)-1业务概览

    1、业务情景概览 用途和优点: 用途 本业务情景描述以批量生产为导向的典型业务流程 该业务情景以按库存生产方式 (MTS) 生产成品以及所有相关组件 ...

    SAP最佳业务实践
  • Linux系统搭建C++开发环境

    Linux编译C++程序必须安装g++编译器。这里使用yum方式安装。首先切换到root账号,su - root 然后输入密码。

    震八方紫面昆仑侠

扫码关注云+社区

领取腾讯云代金券