jquery 音频播放

根据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

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

原价$ 11.95 您的完全免费

免费获得这本书

这是一款可响应视网膜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。 在撰写本文时，该项目最近已更新。 支持质量似乎是一流的，因为开发人员热衷于在问题出现时Swift解决。

• 执照：商业（$ 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音频播放器，具有出色的UI。 它具有平滑的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入门的截屏视频 。

翻译自: https://www.sitepoint.com/10-jquery-html5-audio-players/

jquery 音频播放