Advertisement
  1. Web Design
  2. Site Elements
Webdesign

创建一个自定义HTML5音频播放器

by
Difficulty:IntermediateLength:LongLanguages:

Chinese (Simplified) (中文(简体)) translation by Alfred Y. Zhu (you can also view the original English article)

在本教程中,我将为你介绍HTML5的音频并且为你展示你可以如何创建属于你自己的播放器。

如果你希望绕过教程,你可以看看我们在Envato Market上有售的现成的HTML5音频播放器。 它可以允许你通过各类资源来创建播放列表,以及大量的可自定义选项们。

HTML5 Audio Player with Playlist
含有播放列表的HTML5音频播放器

你同时可以在Envato Studio上找到众多的HTML5专家来帮助你。


前言

至今为止,将音频应用到网站项目中依然是一个沉闷的过程,而且很多时候需要依赖第三方插件例如Flash。 由于iPhone臭名昭著的完全不能被接受的插件,以及Adobe关于不再在手机平台上支持Flash的新闻,很多开发人员都希望寻找到其他的方式来将音频应用到他们的项目中, 这个时候HTML5版本的音频就是最好的解决问题的办法。

尽管HTML5提供了一个标准的在网页上播放音频文件的能力,但它仍然看起来过于老土,在HTML5能像其他诸如Flash插件一样提供给你所有选项之前,还有很长的一段路要走。 不过,对于大多数情况来说,它已经足够了。


简单HTML5音频

使用HTML5来将音频应用到网页中最简单的办法就是使用新的audio标签 将如下代码添加到你的HTML5文档中:

如果你仔细观察一下上面的代码,你可以看到我有一个<audio>标签的声明,而且我还定义了控制按钮的属性,所以我们就可以看到默认的播放器控制按钮。

<audio>内部我们嵌套了两个'src'标签, 一个用来定义MP3音轨,另外一个用来定义OGG格式。 OGG格式是特别被使用来允许音乐能被在火狐浏览器使用的,由于火狐浏览器的许可问题它并不能在没有插件的情况下播放MP3, 一行文字会出现:你的浏览器不支持音频元素, 这让那些使用并不支持该浏览器的用户知道发生了什么。


默认的HTML5音频播放器

HTML5音频标签属性

除了支持总体的HTML5属性标签之外还支持一组本身所特有的属性。

  • 自动播放 - 这个可以被设置为"true"或者留白""来定义当页面读取完毕后音轨是否自动播放。
  • 控制按钮 - 在上面的样例里面可以看到,这个定义是否显示自带的类似‘播放、暂停’等按钮。
  • 循环播放 - 这个可以被设置为“loop”并且定义音轨是否会在播放完毕后再重头开始播放。
  • 预读 - 这个可以被设置为“auto”(这个定义了当页面打开时文件就会开始被读取),“metadata”(这个定义了是不是只是读取音轨信息、标题等),“none”(这个定义了当页面打开时浏览器并不会预读任何的文件)。
  • src - 这个可以在上面的样例中看到,它定义了会被音频标签播放的音乐文件的url。

把音量开大!

在过去的几个步骤里,我们看了如何最简单的创建HTML5音频, 当我们开始使用音频标签配合javascript时,我们可以开始创建一些非常有趣而且有用的音频播放器。 让我们来看看jQuery能帮我们做什么。 当我们在jQuery里面定义了document ready以后,我们可以创建一个新的音频变量来控制我们的音频文件,就想下面这样简单:

就是这么简单! 那么任何时候,当我们希望对音频执行一个动作的时候,我们可以使用变量‘myaudio’来触发它。 底下是一个列表,列出了各类我们可以通过变量进行操作的动作。 记得记个笔记,其中的一些将被我们在接下来的教程中使用来创建我们的音频播放器。

如果你希望一个功能在音频播放完毕的时候被访问,那么你可以使用‘myaudio.addEventListener('ended),myfunc’ - 这个会在音频播放完毕时请求一次'myfunc()'。


创建HTML5音频播放器:结构

现在你已经有了一些对HTML5音频的以及最基本的知识的了解,是时候来做一些练习并创建一个自定义的HTML5音频播放器了。 我将把设计的那个步骤排除在本教程之外,但是你可以下载附件里的源文件并查看PSD格式文件,以此来获取一些概念并了解我是如何将他们组合在一起的。

在文档的顶部是HTML5的doctype, 雅虎CSS ResetGoogle在线字体‘Lobster’以及标题, 然后我们有了最新版本的jQuery以及自定义JavaScript文件js.js。 最后我们将读取html5slider.js,这允许火狐来显示HTML5中input的range类型,我们将使用它来制作音频播放器里的拖动条。

在h1标题之后,我创建了一个div并赋予了class“container”和“gradient”。 我创建了一个分离的渐变(gradient)class,这样我们将再一次使用它到其他的一些元素上。 在".container"之内,我添加了一个图片(它将会是唱片封面),然后三个锚点标签将会作为播放器的控制按钮来工作。 在他们之间,你会看到一个拖动条/HTML5 range input区域。


创建HTML5音频播放器:样式

我并不会在本教程中囊括所有方面的CSS细节,反之,我将给你一个概观和基本的注解到一些特定的部分,那些你可能希望更加注意的部分。

在下面的代码中,我为播放器创建了一个渐变效果,它是由CSS渐变编辑器所生成的。 接下来,我创建了一个播放器的“.container”以及一些CSS3的过渡。

你会发现,我同时使用了CSS3的盒子尺寸的属性集来设置‘border-box’。 这个允许我们在容器的周围创建一个10像素的padding,包括在我已经定义的宽度里面,在这个样例中是427像素。 如果我并没有使用这个padding,那么结果将会是在427像素的基础上再添加额外的宽度,这样就使容器大于我想要的尺寸了。 在现今,使用* {box-sizing: border-box;} 已经是一件很正常的事情了,这个可以创建一个更直观的方式来添加样式。

我同时添加了一些CSS3的过渡到“.coverlarge”使播放器第一次打开的时候生成一些漂亮的过渡效果。 这个CSS有可能看起来有一点过于的夸张了,但是它们的绝大部分都是由浏览器的prefix组成的,这是来确保音频播放器在不同浏览器之间都看起来完全是相同的。


这就是在当前情况下播放器的样子

当播放器的容器完成了以后,是时候来创建一个实际的控制按钮了, 大部分按钮都是使用CSS sprites来创建的。

不幸的是,IE暂时还不支持HTML5中input的range属性,所以我决定对于IE用户来说暂时不显示拖动条。 如果你正处于一个必须要实现这个效果的境地,你可以使用jQuery UI slider来使用想死的方式来实现我说的效果。 同样的,我已经简单的用代码隐藏了input{display:none\9!important;},这样的基本代码可以为ie用户屏蔽显示input(看看这个Stack Overflow上的讨论帖来获得更多关于\9的信息)。

HTML5的range滑动条的问题是仅仅有比较少的浏览器支持自定义样式;大部分都是webkit浏览器支持(Chrome和Safari), 不幸的是,例如Opera和Firefox将只显示最基本的range滑动条。 如果你确实需要为所有浏览器来自定义样式,那么你可以使用我们上面所提到的jQuery UI slider。 你可以看到为webkit浏览器自定义样式的设定是在input::-webkit-slider-thumb属性里。


创建HTML5音频播放器:jQuery

一但样式表和结构完成了以后,我们就需要开始来创建我们实际的播放器了。 我们可以用javascript的框架jQuery来完成它。 一但jQuery中document ready被声明了以后,我们就可以创建用于存储我们jQuery物体的变量了。

在“song(歌曲)”变量中,你可以看到我们定义了两个音轨。 其中OGG格式是为了火狐浏览器,而MP3是为了其他浏览器的。 接着我创建了一个if的条件语句声明,这样我们可以检查浏览器是否能播放MP3。 如果它可以,那么我们将改变“song”变量的链接到MP3音轨 - 如果它不能播放就读取‘OGG’格式。

下一步我们将要创建一个点击的功能,,这个将允许我们播放和暂停音乐。 我使用了音频动作play()来开始音频,然后使用jQuery功能replaceWith这样基本可以完全替换播放按钮和暂停按钮。

我同时添加了“coverLarge”和“containerLarge”class到“container”和“cover”上。 由于我早先已经添加了CSS3的过渡到CSS里,所以当音频开始播放的时候会显示出漂亮的效果。 “暂停”的工作方式是相似的,但是并没有过渡效果。 当点击时,它将“播放”按钮替换为了“暂停”按钮。

静音和已静音按钮的工作方式和播放暂停按钮也是基本相同的,但是访问相关动作和替换按钮的时候使用相应的替代。

当用户点击“关闭”按钮的时候我们访问jQuery来移除“containerLarge”和“coverLarge”class。 这样会隐藏封面并关闭播放器的支持。 接下来我们通过pause()动作来暂停播放器,然后重置音频的currentTime到0,这样就将播放器重置为开始的状态。

现在是时候继续来完善拖动条了,我们给了它一个id为“seek”, 第一个功能是允许我们移动拖动条到音频的任意位置, 这个需要在检测是否有人移动了拖动条的前提下来实现, 我们然后设置song.currentTime来匹配拖动条拖到的位置的歌曲时间。 我们同时设置最大属性来定义歌曲的总时长。

最后一部分的jQuery是让“#seek”拖动条保持在音频播放的时候跟随并不断的移动。 我们将要添加一个事件监听器然后当音频时间更新的时候我们就呼叫这个function。 我设置了一个"curtime"变量来获得当前歌曲的时间, 然后更新拖动条的值来反映出当前音频时间的位置。

然后你就搞定啦! 一个你可以应用到你的网站或者app的HTML5音频播放器。


结语

正如我之前提到的,HTML5音频依然是一个不是很花哨而且还有待提升的, 在当天来说音频是设计来播放音乐的,而且会因此不断的从服务器获取音频流,这样在某一些浏览器会导致playback发生问题, 虽说这不总成为问题,但是却意味着有时候它会在完整的下载音频之前就开始播放。

如果你希望使用HTML5音频来作为游戏或者含有诸多音频app的音效时,这可能会成为潜在的问题, 由于这个原因,我们在Google的朋友已经有了一个方式来改进音频标签的弱项。 Google已经创建并向W3C提出了一项议题“Web Audio API”, 这个被证实会变的比HTML5的音频标签更牛气,不过在当下有一个问题(你猜是啥?)它只能在Chrome里被支持。

你可以阅读更多关于Google的Web Audio API并在Google code阅览一些样例,或者你也可以看看这个web audio specification

我希望你享受学习关于HTML5音频的知识,以及关于如何创建你自己的播放器的方式。 我的播放器包含了最基本的控制,但是没有任何人阻止你来添加更多功能,诸如音量控制甚至添加你自己的自定义动画等等, 你只需要稍微的用一点心去思考,再加上一点点实践,你可以创建一些非常不错的音频播放器。 下载源代码,我期待能看到你能做出什么不一样的成果!

如果你希望看到更多选项关于HTML5里如何制作音频播放器或是其他媒体,看看这个Envato Market上的HTML5媒体项目吧。

Envato qr branded
关注我们的公众号
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.