10个jQuery HTML5音频播放器

根据Buzz Angle Music的数据，2017年第一季度，仅美国就消费了830亿个音频流。这比上一季度增长了61.2％。同时，音乐销量下降了23.8％。

2017年5月8日：此热门文章已更新，以反映当前可用的音频播放器和插件。

流式传输的优点之一是，观众可以欣赏自己喜欢的音乐和在线广播，而不必担心设备上的存储空间。随着负担得起的Internet的普及使越来越多的人，越来越多的人，尤其是年轻的一代正在发现这种便利。

如果您想涉足流媒体业务，那么比检查我编译的HTML5音频播放器列表要糟糕得多。

1. MediaElement.js

当前，MediaElement.js是网站上最好的开源媒体播放器之一，同时支持视频和音频。 MediaElement.js能够播放本地和第三方来源的媒体，例如SoundCloud，YouTube，DailyMotion，Vimeo和Twitch。可以使用Vanilla JavaScript，jQuery，Node，Meteor，Require.js和React进行配置。

我之所以将这个媒体播放器放在首位，是因为它仍在积极开发中。这意味着问题将得到更快解决，并且可能会与最新的HTML5标准和浏览器支持保持同步。

许可证：开源（MIT）
网站
下载
来源（GitHub）
NPM –上个月下载4,697
文献资料
CDN链接：
- http://www.jsdelivr.com/projects/mediaelement
- https://cdnjs.com/libraries/mediaelement

2. SoundManager 2

SoundManager 2的构建可简化向台式机和移动平台提供音频的过程。它具有强大的API，该API在受支持的情况下使用HTML5音频，并在需要时可以选择使用Flash。它没有外部依赖性，可以与其他JavaScript框架（例如jQuery）一起使用。文档是一流的，允许开发人员根据需要进行配置。它支持播放列表，开箱即用提供多种外观。使用它的一些网站包括Last.fm和BeatsMusic。

该音频播放器的开发速度有所减慢，但是开源社区在解决用户报告的问题方面做得很好。 Sound Manager 2确实设计精良，但仍与最新的浏览器标准兼容。当前，它支持所有主要浏览器，包括IE6，Safari和Android。

许可证：开源（BSD）
网站
NPM –上个月下载5,048
来源（GitHub）

3. React-jPlayer

如果您正在寻找不依赖jQuery的jPlayer版本，那么您很幸运（也就是说，如果您是React开发人员）。 React-jPlayer是一个受jPlayer启发的非常新的条目。它目前支持音频和视频。支持IE9和所有现代移动平台上的现代浏览器。这意味着不支持IE6和IE7等较旧的浏览器（没什么大不了的）。自从iOS和Chrome 正式放弃对 Flash的支持以来，它并没有使用Flash作为后备。

该项目似乎是在几个月前开始的，在上个月已经获得了520次下载。从提供的演示中，所有功能似乎在台式机和移动设备上均正常运行。不过，目前不支持播放列表。这将在即将到来的名为react-jPlaylist的程序包中实现。

作为一个React项目，这显然限制了在其他前端JavaScript框架（例如Vue.js）中的使用。但是，它确实具有大量可定制的功能，使其成为构建新的流媒体音乐现代网站的理想选择。

许可证：开源（MIT）
演示版
NPM –上个月下载520次
资源

4. HTML5音频播放器和播放列表

这个广受欢迎的HTML5音频播放器为用户带来了众多选择。它支持多种功能和外观，如实时预览页面所示，包括全屏幻灯片放映。它的众多功能之一是支持弹出窗口，使访问者可以继续浏览您的网站而不会中断音频流。同一页面上还支持音频播放器的多个实例。

许可：商业版（17美元），支持6个月
销量：3,300+
网站
演示版

5.全宽音频播放器

这是一个WordPress插件，可将您的标准WordPress网站转换为音乐网站。它具有充分的响应能力，并具有将播放列表和曲目添加到页面或帖子的功能。它还支持用于不间断媒体播放的窗口弹出窗口。您可以在任何WordPress页面的底部添加FullWidth Audio Player或使用简码发布。还支持SoundCloud。

许可：商业版（25美元），支持6个月
销量：2830+销量
网站
演示版

6. Zoomsounds

这是一款可响应视网膜的HTML5音频播放器，具有3种外观。支持所有移动和现代浏览器，包括IE7 +。它支持播放来自YouTube以及SoundCloud的音频。开发人员可以通过SASS或CSS自定义播放器的UI。该组件的开发人员还提供了WordPress版本。

许可：商业版（10美元），支持6个月
销量：830+
网站
演示版

7.皇家音频播放器

这是一款音频和视频播放器，适合那些希望使用时尚的音频播放器娱乐在线访客的人。它具有响应能力，并支持所有现代浏览器和移动平台。它具有广泛的API，支持YouTube，SoundCloud，Podcast，Official.fm，SHOUTcast和Icecast。它还支持外部资源，例如Google Drive和Amazon S3。在撰写本文时，该项目最近已更新。支持质量似乎是一流的，因为开发人员热衷于在问题出现时迅速解决。

执照：商业（$ 18）
销量：480+
网站
演示版

8. jPlayer 2

jPlayer 2是一个音频和视频jQuery插件，支持HTML5和Adobe Flash作为后备。它支持所有主要浏览器，包括IE6 +，Safari，Chrome，Mozilla，IOS，Android和Blackberry。它的文档内容丰富，允许开发人员根据自己的需要对其进行自定义。它支持播放列表，并且开箱即用提供了多个主题。 Pandora，BBC和Aljazeera等组织都使用它。

可悲的是，这个伟大的插件被开源社区所忽视。问题堆积如山，它很快就落后于现代浏览器标准。但是，有一些好消息。 jPlayer 3的计划已经在进行中。目标是带来许多改进，包括删除jQuery依赖关系，使其可以在更多环境中使用。

许可证：开源（MIT）
网站
NPM –上个月下载2,221次
来源（Github）
支持：
- 吉特
- Google群组

9. Gear HTML5音频播放器

Gear是一款基于jQuery的超凡脱俗的HTML5音频播放器，具有出色的用户界面。它具有平滑的SVG动画，独特的画布均衡器和SoundCloud支持。它具有移动响应设计，JSON播放列表，循环引用和停靠的迷你播放器。款式由LESS精心打造。巧合的是，SoundManager 2被认为是用于构建此精美音频播放器的项目之一。

执照：商业（$ 13）
销量：402
网站
演示版

10. tPlayer – WordPress音频播放器

tPlayer是WordPress的基于jQuery的播放器。它支持MP3音频文件播放以及SoundCloud，SHOUTcast和Icecast的流。它在平板电脑和智能手机设备上具有出色的UX设计，并包含SVG动画。播放器还具有购买和下载链接。

执照：商业（$ 28）
销量：600+
网站
演示版

包装全部

此列表为您提供了一些目前可用的最佳开源和商业音频播放器。尽管本文的标题是关于jQuery音频播放器的，但通常还是会从源代码中删除jQuery依赖项。这是为了允许将音频播放器集成到不需要jQuery的更多JavaScript框架中。

为您的网站选择音频播放器时，您应该热切地希望它多久更新一次。这是因为浏览器确实得到了更新，有时会中断音频播放器正在使用的某些功能。

如果商业HTML5音频播放器包含您网站所需的目标功能，则它们很棒。它们通常带有多个外观，并且还具有使用CSS进行进一步自定义的功能。如果您的预算有限或只是想尝试，开源HTML5音频播放器也很棒。开源许可证允许您通过添加新代码或第三方库来完全自定义功能，以创建具有独特功能的新型音频播放器。

该列表可能并不完整，但我希望至少它能使您了解那里提供的内容。您有推荐的插件吗？我想念您最喜欢的音频播放器吗？在评论中让我知道！

而且，如果您喜欢这种方法并且想自己制作音频，则可能想查看有关Web Audio API入门的截屏视频。

From: https://www.sitepoint.com/10-jquery-html5-audio-players/