• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

响应和触摸式音频播放器Codrops Audio

JAVA web前端中文站 2年前 (2017-08-15) 1769次浏览 已收录 0个评论

Codrops Audio 界面使用纯CSS编写,支持响应式,可以方便在桌面、平板以及手机设备上使用。界面因为是CSS编写,所以如果懂CSS样式,可以自己设计一个新的样式来修改。并且该播放器还支持国际化。

更多精彩内容请看 web 前端中文站
http://www.lisa33xiaoq.net 可按 Ctrl + D 进行收藏

该播放器是一个基于 jQuery 的音乐播放器插件。支持响应式,触摸操作,整个 ui 都是使用 css 布局,没有使用一个图片元素。支持智能手机,平板,PC 电脑等设备。

响应和触摸式音频播放器 Codrops Audio

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

web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:响应和触摸式音频播放器 Codrops Audio
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址