文档结构  
翻译进度:已翻译     翻译赏金:0 元     ¥ 我要打赏

根据 Buzz Angle Music 调查显示,2017年第一个季度单就美国一个国家共消费了830亿次的音频播放,比去年同期增长了 61.2%。但是与此同时,音乐的销售下跌 23.8%。

音频流的好处之一就是听众可以选择自己喜欢的音乐和在线广播,而不用担心设备上的存储空间问题。越来越多的人,特别是年轻一代,发现了这个网络服务的方便和实惠。

第 1 段(可获 1.29 积分)

如果你想要进入流媒体业务,除了看看我这篇文章中提供的 HTML5 音频播放器列表之外,还需要做很多其他事情。

1. MediaElement.js

MediaElement

当前最棒的用于网站的开源媒体播放器,MediaElement.js 支持视频和音频播放,可以从本地和第三方源(SoundCloud, YouTube, DailyMotion, Vimeo 和 Twitch) 等播放。可通过纯 JavaScript, jQuery, Node, Meteor, Require.js 和 React 进行配置使用。

我把 MediaElement.js 放在这个列表的首位是因为该项目目前仍然开发活跃。这意味着问题会得到快速的解决,而且对 HTML5 标准以及最新浏览器的支持也将快速得到支持。

第 2 段(可获 1.56 积分)

2. SoundManager 2

SoundManager2

SoundManager 2 简化了桌面和移动平台上的音频播放功能的开发。提供强大的 API 优先选择 HTML5 音频功能进行播放,如果浏览器不支持会自动降级到 Flash 方案。无需依赖其他项目,可与其他 JavaScript 框架结合使用,如 jQuery 等。项目的文档非常完备,允许开发者根据需要进行定制。支持播放列表和皮肤选择。使用它的网站包括 Last.fm 和 BeatsMusic。

第 3 段(可获 1.46 积分)

目前这个播放器的开发速度已经慢了下载,但是开源社区做了很多工作来解决用户报告的问题。Sound Manager 2 设计优良,而且兼容最新浏览器标准。当前支持主流的浏览器,包括: IE6, Safari 和 Android。

3. React-jPlayer

React-jPlayer

如果你要选择一个不依赖于 jQuery 的 jPlayer 版本,那么很幸运(这就是,如果你是 React 开发者的话)。React-jPlayer 是一个全新的选择,其灵感来自于 jPlayer。当前支持音频和视频播放。浏览器支持 IE9 及以上新版本,和其他主流的浏览器。老的浏览器如 IE6、7 不支持。不提供 Flash 作为向下兼容的解决方案。因为 iOS 和 Chrome 官方已经不再支持 Flash 了。

第 4 段(可获 1.91 积分)

这个项目好像是数月前才开始做的,最近一个月已经有超过 520 个下载。从提供的演示程序来看,所有的功能特性在桌面和移动设备上工作良好。虽然,还有名为 react-jPlaylist 这个尚未实现的特性。

作为一个 React 项目,最明显的限制就是无法跟其他的 JavaScript 框架一同使用,如 Vue.js。但的确有大量可定制的功能用来构建一个适合现代流媒体音乐网站的播放器。

第 5 段(可获 1.21 积分)

4. HTML5 Audio Player with Playlist

HTML5 Audio Player with Playlist

这个非常流行的 HTML 5 音频播放器给用户带来了很多的定制选项。在预览页面就已支持很多特性,包括全屏支持幻灯展示。支持弹窗,允许访客在不影响当前页面浏览的情况下播放音频。支持同一个页面的多个播放器。

  • 许可证: 商业支持 ($17)  6 个月
  • 销售: 3,300+
  • 网站
  • 演示
第 6 段(可获 1.23 积分)

5. FullWidth Audio Player

Full Width Audio Player

这是一个 WordPress 插件,可以将标准的 WordPress 网站转成一个音乐网站。完全响应式设计,可以添加播放列表到页面或者是文章。同时支持 Windows 弹窗的无中断式媒体播放。可以在 WordPress 页面底部添加 FullWidth Audio Player 。支持 SoundCloud。

  • 许可证: 6个月商业支持 ($25)
  • 销售: 2830+ sales
  • 网站
  • 演示

6. Zoomsounds

Zoomsounds

这是一个响应式的、支持视网膜屏的 HTML5 音乐播放器,提供三种不同的皮肤。支持 IE7+ 的所有主流的浏览器。支持播放来自 YouTube 和 SoundCloud 的音频。开发者可以使用 SASS 和 CSS 对外观进行定制。同时提供了 WordPress 版本。

第 7 段(可获 1.75 积分)
  • 许可证: 6个月商业支持 ($10)
  • 销售: 830+
  • 网站
  • 演示

7. Royal Audio Player

Royal Audio Player

这是一个音频和视频播放器,主要为那些想给在线游客提供时尚音频播放的网站开发。Royal 是响应式的,支持主流浏览器和移动平台。提供扩展 API,支持 YouTube, SoundCloud, Podcasts, Official.fm, SHOUTcast 和 Icecast。同时支持外部资源,包括:Google Drive 和 Amazon S3。与此同时该项目最近一直在更新,支持的力度很大。

第 8 段(可获 1.29 积分)

8. jPlayer 2

jPlayer 2

jPlayer 2 是一个 jQuery 的音频播放插件,支持 HTML5 和 Flash 作为备选方案。支持所有主流浏览器,包括 IE6+, Safari, Chrome, Mozilla, IOS, Android 和 Blackberry。其文档非常全面,可以让开发人员根据需要进行定制。支持播放列表和多个主题。目前有包括 Pandora、BBC 和 Aljazeera 等网站在使用。

令人遗憾的是该插件已经被开源社区所忽视。问题堆积如山,而且对最新的浏览器标准的支持也很差。不过有一个好消息是 jPayer 3 已经在计划中,其目标是移除对 jQuery 的依赖并带来很多改进。

第 9 段(可获 1.75 积分)

9. Gear HTML5 Audio Player

Gear HTML5 Audio Player

Gear 是一个基于 jQuery 的 HTML5 音频播放器,界面相当惊艳。提供平滑的 SVG 动画,一个独一无二的基于 Canvas 实现的均衡器,支持 SoundCloud。提供移动响应式设计支持,支持 JSON 播放列表和圆形播放进度显示,提供一个停靠的小播放器组件。使用 LESS 进行样式定制。巧合的是,SoundManager 2 被认为是构建该项目的组件之一。

第 10 段(可获 1.08 积分)

10. tPlayer – Audio Player for WordPress

tPlayer WordPress audio plugin

tPlayer 是一个基于 jQuery 的播放器,主要用于 WordPress。支持 MP3 以及来自 SoundCloud、SHOUTcast 和 Icecast 的音频流。提供很棒的用户体验设计,可用于平板和智能手机设备。提供 SVG 动画。

总结

该作者的其他文章

这个列表给你一些最好的开源和商业的音频播放器。虽然本文的标题是关于 jQuery 的音频播放器,但是通常也有不对 jQuery 依赖的版本。这样可以让播放器和其他的 JavaScript 框架进行集成。

第 11 段(可获 1.76 积分)

当你正在为网站选择一个音频播放器时,你应该关注该播放器的更新频率。这是因为浏览器日新月异,这样可以确保很多新特性被播放器使用。

商业的 HTML5 音频播放器如果包含有你所需的功能那是非常棒的。它们通常会含有各种皮肤,以及提供定制功能。而开源的播放器同样很棒,如果你预算有限,又或者你想要一个简单的体验。开源的许可证可以让你完全的通过简单的代码和第三方库对功能进行定制,并因此创建一个全新的播放器。

第 12 段(可获 1.46 积分)

本文推荐的这个播放器列表可能还不够全面,但我希望最少可以给你一个可用的播放器选择。你有其他的插件想要推荐码?我是不是漏掉了你最喜欢的那个呢? 请在评论里分享出来。

第 13 段(可获 0.55 积分)

文章评论