audio.js 让所有浏览器都支持 HTML5 Audio 标签的音乐播放器插件 - 文章教程

audio.js 让所有浏览器都支持 HTML5 Audio 标签的音乐播放器插件

发布于 2018-07-18 字数 2769 浏览 3496 评论 0

audio.js 提供了一种更加灵活的方式来使用 HTML5 的 <audio> 标签。可以用它来制作一个Mp3播放器,当浏览器不支持 <audio> 标签时,它将自动换成 Flash 来支持 Mp3 文件的播放,达到相同的浏览效果和用户体验。

audio.js 基于 HTML5 Audio 音乐播放器 JavaScript 插件

原理

对于高级浏览器使用 Audio 播放音乐,对于哪些不支持 Audio 标签的浏览器,采用一个隐藏的 Flash 去播放音乐,对于外观样式采用统一的 CSS 样式表控制,保证在任何浏览器上面浏览都能达到相同的浏览效果和用户体验。

如何使用

下载 audio.jsplayer-graphics.gifaudiojs.swf

在网页中引入 audio.js 文件

<script src="/audiojs/audio.min.js"></script>

编写 audio.js 代码:

audiojs.events.ready(function() {
  var as = audiojs.createAll();
});

在适当的位置放置 <audio> 标签:

<audio src="/mp3/juicy.mp3" preload="auto" />

在线 Demo

使用和扩展 Audio.js 的一系列 API 测试和实例

浏览器支持

以 Flash 作为后盾,它应该在任何地方都能工作,经核实,该系统可在下列各方面开展工作:

  • Mobile Safari (iOS 3+)
  • Android (2.2+, w/Flash)
  • Safari (4+)
  • Chrome (7+)
  • Firefox (3+, w/ Flash)
  • Opera (10+, w/ Flash)
  • IE (6, 7, 8, w/ Flash)

ogg

Audio.js 专注于播放 Mp3。它目前不支持 Ogg 格式。由于 Mp3 是当前事实上的音乐传输格式,Ogg 支持在我们的优先事项列表中处于较低的位置。

如何获取

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

勿忘心安

文章 0 评论

ekko

文章 0 评论

江挽川

文章 0 评论

献世佛

文章 0 评论

Meets

文章 0 评论