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

HTML5 herman 732浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog,发送下载链接帮助你免费下载!
本博客日IP超过1800,PV 2600 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog,之前的微信号好友位已满,备注:返现
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领

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

该播放器是一个基于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/

参考资料

业余草公众号

最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加QQ1群:135430763(2000人群已满),QQ2群:454796847(已满),QQ3群:187424846(已满)。QQ群进群密码:xttblog,想加微信群的朋友,之前的微信号好友已满,请加博主新的微信号:xttblog,备注:“xttblog”,添加博主微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

本文原文出处:业余草: » 响应和触摸式音频播放器Codrops Audio