Codrops Audio 界面使用纯CSS编写，支持响应式，可以方便在桌面、平板以及手机设备上使用。界面因为是CSS编写，所以如果懂CSS样式，可以自己设计一个新的样式来修改。并且该播放器还支持国际化。
更多精彩内容请看 web 前端中文站
http://www.lisa33xiaoq.net 可按 Ctrl + D 进行收藏
该播放器是一个基于 jQuery 的音乐播放器插件。支持响应式，触摸操作，整个 ui 都是使用 css 布局，没有使用一个图片元素。支持智能手机，平板，PC 电脑等设备。
Codrops Audio 的特点
- 禁用 JavaScript 后，该插件还可以正常运行
- 可以隐藏音量按钮
- 当浏览器完全不支持该<audio>元素或任何所提供的音频文件时，播放器然后优雅地降级到<embed />
- 最新版本的插件只有 4KB 大小。
用法
和普通的 audio 用法一样，下面是 html 代码：
<audio src="audio.wav" preload="auto" controls></audio>
前面说了它是一款 jQuery 插件，因此，我们需要引入 jQuery。
<audio src="audio.wav" preload="auto" controls></audio>
<script src="jquery.js"></script> <script src="audioplayer.js"></script>
<script>$( function() { $( 'audio' ).audioPlayer(); } );</script>
然后通过 js 配置，可以实现国际化显示。
$( 'audio' ).audioPlayer({
classPrefix: 'player',
//默认值 strPlay: 'Play',
//默认值 strPause: 'Pause',
//默认值：'暂停' strVolume: 'Volume',
//默认值：'Volume' });
除了上面这些，该音乐播放器还有很多其他的功能。大家可以下载源代码进行学习。https://tympanus.net/codrops/2012/12/04/responsive-touch-friendly-audio-player/
【注：本文源自网络文章资源，由站长整理发布】
参考资料
- Responsive & Touch-Friendly Audio Player
