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

  • Z时代
  • 2024-01-10
  • 分类：IT

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

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

原理

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

如何使用

下载 audio.js、player-graphics.gif 和 audiojs.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 测试和实例

  • 示例 1 Test multiple load types

  • 示例 2 Custom markup/css

  • 示例 3 Multiple players, testing preload, loop & autoplay attributes

  • 示例 4 Customised player

  • 示例 5 Customised playlist player

浏览器支持

以 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 支持在我们的优先事项列表中处于较低的位置。

如何获取

  • 官方网站：http://kolber.github.io/audiojs/

  • Github 地址：https://github.com/kolber/audiojs

以上是 audio.js 让所有浏览器都支持 HTML5 Audio 标签的音乐播放器插件 的全部内容， 来源链接： utcz.com/p/231905.html

回到顶部