自定义音频播放器
在本教程中，我将向您介绍HTML5音频，并向您展示如何创建自己的播放器。
如果您想走捷径，请查看Envato市场上可用的现成的HTML5音频播放器 。 它使您可以从各种来源创建播放列表，并提供了广泛的自定义选项。
您还可以在Envato Studio上找到大量HTML5专家来帮助您。
介绍
到目前为止，将音频实现到Web项目中是一个繁琐的过程，很大程度上依赖于Flash等第三方插件。 由于iPhone臭名昭著的是未接受该插件，而且有消息称Adobe将不再支持移动Flash，因此许多开发人员正在寻找其他将音频整合到其项目中的方法。 这是HTML5音频介入解决问题的地方。
尽管HTML5提供了一种在Web上播放音频文件的标准，但它仍处于起步阶段，要提供其他插件（如Flash音频）提供的所有功能，还有很长的路要走。 但是，在大多数情况下，这已经足够了。
简单HTML5音频
使用HTML5将音频实施到网页中的最简单方法是使用新的音频标签。 使用以下代码将此添加到您HTML5文档中：
<audio controls="controls"><source src="track.ogg" type="audio/ogg" /><source src="track.mp3" type="audio/mpeg" />Your browser does not support the audio element.</audio>
如果看一下上面的代码，您会发现我已经声明了<audio>标记并定义了controls属性，这样我们就可以看到播放器的默认控件。
嵌套在<audio>我们有2个'src'标签。 一个定义MP3轨道，另一个定义OGG格式。 由于许可问题，OGG格式特别用于允许音乐在Firefox中播放。如果不使用插件，Firefox将不支持MP3。 文本字符串您的浏览器不支持音频元素。让不支持浏览器的用户了解发生了什么。
默认HTML5音频播放器
HTML5音频标签属性
除了支持全局HTML5属性外，该标签还支持一组自身唯一的属性。
自动播放-可以设置为“ true”或留空“”以定义是否在页面加载后立即自动播放曲目。控件-如上例所示，它定义是否应显示本机控件，例如“播放，暂停”等。循环-可以设置为“循环”，并定义曲目结束后是否应再次播放。预加载-可以设置为“自动”（描述文件是否应在页面加载后立即加载），“元数据”（描述是否仅应加载元数据，曲目标题等），“无”（指示页面加载时浏览器不应加载文件）。src-也可以在上面的示例中看到，它定义了应由音频标签播放的音乐的网址。
提升至十一
在最后几步中，我们介绍了最简单HTML5音频形式。 当我们开始通过javascript使用音频标签时，我们可以开始创建一些非常有趣且有用的音频播放器。 让我们看一下jQuery可以为我们做些什么。 在jQuery中定义好文档后，我们可以创建一个新的音频变量来保存音频文件，就像这样简单：
var myaudio = new Audio('mysong.mp3');
真的就是这么简单！ 然后，只要我们想对音频执行操作，就可以使用变量“ myaudio”来触发它。 这是我们可以对该变量执行的操作的列表。 记下这些内容，稍后我们在创建音频播放器时将在tut中使用其中的一些内容。
myaudio.play(); - This will play the music.myaudio.pause(); - This will stop the music.myaudio.duration; - Returns the length of the music track.myaudio.currentTime = 0; - This will rewind the audio to the beginning.myaudio.loop = true; - This will make the audio track loop.myaudio.muted = true; - This will mute the track
如果您希望在音频播放完毕后调用某个函数，则可以使用'myaudio.addEventListener（'ended'，myfunc）'-音频播放完后将调用'myfunc（）'。
创建HTML5音频播放器：标记
现在您已经对HTML5音频有了一定的了解，并且了解了基本原理，是时候将它们付诸实践并创建定制HTML5音频播放器了。 我将错过设计阶段，因为它不在本教程的讨论范围内，但是您可以下载随附的源代码并浏览PSD，以了解如何将其组合在一起。
该文档的顶部由HTML5文档类型组成。 Yahoos CSS Reset ，标题的Google网络字体 “ Lobster”。 然后，我们有最新的jQuery和自定义JavaScript文件js.js。 最后，我们有了html5slider.js ，它使Firefox可以显示HTML5输入范围类型，该类型将用于音频清理器。
<!DOCTYPE html><head><title>HTML5 Audio Tutorial</title><link rel="stylesheet" type="text/css" href="/3.3.0/build/cssreset/reset-min.css"><link href='/css?family=Lobster' rel='stylesheet' type='text/css'><link rel="stylesheet" type="text/css" href="css/style.css"><script src="/jQuery-latest.js" type="text/javascript"></script><script type="text/javascript" src="js/js.js"></script><script type="text/javascript" src="js/html5slider.js"></script></head>
在h1标题之后，我创建了一个具有“容器”和“渐变”类的div。 我创建了一个单独的渐变类，因为它将在其他一些元素上重复使用。 在“ .container”中，我添加了一张图片（将作为专辑封面），然后这三个锚标记将用作播放器的控件。 在它们之间，您将找到scrubber / HTML5范围输入字段。
<body><h1>HTML 5 Audio Player</h1><div class="container gradient"><img class="cover" src="images/cover.jpg" alt=""><div class="player gradient"><a class="button gradient" id="play" href="" title=""></a><a class="button gradient" id="mute" href="" title=""></a><input type="range" id="seek" value="0" max=""/><a class="button gradient" id="close" href="" title=""></a></div><!-- / player --></div><!-- / Container--></body></html>
创建HTML5音频播放器：样式
我将不为您介绍CSS的各个方面，而是给您一个概述，并指出您可能需要注意的任何特定部分。
在下面的代码中，我为使用此CSS渐变编辑器生成的播放器创建了渐变。 然后，我用一些CSS3过渡创建了播放器“ .container”。
您会注意到我还使用了将CSS3框大小设置为'border-box'的属性。 这允许容器周围的10px填充被包含在我声明的宽度内，在本例中为427px。 如果我没有使用此填充，则会将填充添加到427px中，从而使容器大于实际所需的尺寸。 如今，应用* {box-sizing: border-box;}已成为一种常见的做法* {box-sizing: border-box;}这实际上使样式设计更直观。
我还在“ .coverlarge”中添加了一些CSS3过渡，以便在播放器首次打开时提供一些不错的过渡。 刚开始时，CSS可能看起来有点让人不知所措，但是其中很多是特定的浏览器前缀，以确保音频播放器在不同的浏览器中看起来和工作相同。
.gradient {border: 1px solid black;-webkit-box-shadow: inset 0 1px 0px rgba(255,255,255,.2);-moz-box-shadow: inset 0 1px 0px rgba(255,255,255,.2);box-shadow: inset 0 1px 0px rgba(255,255,255,.2);background: #494949; /* Old browsers */background: -webkit-linear-gradient(top, #494949 0%, #434242 31%, #393838 55%, #242323 83%, #1b1a1a 100%, #161515 100%, #0b0b0b 100%);background: -moz-linear-gradient(top, #494949 0%, #434242 31%, #393838 55%, #242323 83%, #1b1a1a 100%, #161515 100%, #0b0b0b 100%);background: -o-linear-gradient(top, #494949 0%, #434242 31%, #393838 55%, #242323 83%, #1b1a1a 100%, #161515 100%, #0b0b0b 100%);background: -ms-linear-gradient(top, #494949 0%, #434242 31%, #393838 55%, #242323 83%, #1b1a1a 100%, #161515 100%, #0b0b0b 100%);background: linear-gradient(top, #494949 0%, #434242 31%, #393838 55%, #242323 83%, #1b1a1a 100%, #161515 100%, #0b0b0b 100%); /* W3C */-image filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#494949', endColorstr='#0b0b0b',GradientType=0 ); /* IE6-9 */}.container {-webkit-transition: all .7s ease;-moz-transition: all .7s ease;-o-transition: all .7s ease;-ms-transition: all .7s ease;transition: all .7s ease;position: absolute;width: 427px;height: 70px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;-webkit-box-shadow: 0px 0px 13px rgba(0,0,0,.3),inset 0 1px 0px rgba(255,255,255,.2);-moz-box-shadow: 0px 0px 13px rgba(0,0,0,.3),inset 0 1px 0px rgba(255,255,255,.2);box-shadow: 0px 0px 13px rgba(0,0,0,.3),inset 0 1px 0px rgba(255,255,255,.2);top: 50%;left: 50%;margin: -214px 0px 0px -214px;padding: 10px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;}.containerLarge {height: 427px;}.cover {-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);opacity: 0;width: 398px;height: 10px;border: 2px solid black;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;-webkit-box-shadow: inset 0px 5px 5px rgba(0,0,0,1);-moz-box-shadow: inset 0px 5px 5px rgba(0,0,0,1);box-shadow: inset 0px 5px 5px rgba(0,0,0,1);}.coverLarge {-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter: alpha(opacity=100);opacity: 1;height: 398px;-webkit-transition: opacity .7s ease;-moz-transition: opacity .7s ease;-o-transition: opacity .7s ease;-ms-transition: opacity .7s ease;transition: opacity .7s ease;-webkit-transition-delay: .5s;-moz-transition-delay: .5s;-o-transition-delay: .5s;-ms-transition-delay: .5s;transition-delay: .5s;}
音频播放器在此阶段的外观
播放器的容器完成后，就可以创建实际的控件了。 大多数按钮是使用CSS精灵创建的
不幸的是IE尚不支持HTML5范围输入，因此我决定不向IE用户显示音频清理器。 如果您处于无法接受的位置，则可以使用jQuery UI滑块 ，方法与我使用的方法类似。 尽管如此，我还是选择简单地隐藏洗涤器，因此input{display:none\9!important;}这基本上隐藏了用户的输入（ 请查看Stack Overflow上的该线程以获取\9更多信息）。
HTML5范围滑块的问题在于，只有少数浏览器支持它的自定义样式。 主要是webkit浏览器（Chrome和Safari）。 不幸的是，Opera和Firefox仅会显示标准范围滑块。 如果确实需要在所有浏览器上使用自定义样式，则可以使用前面提到的jQuery UI滑块 。 您可以在input::-webkit-slider-thumb属性中看到Webkit浏览器的自定义样式。
.player {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;position: absolute;width: 300px;bottom: 10px;width: 95%;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;padding: 5px;}.button {display: block;width: 34px;height: 34px;background-image: url(../images/sprite.png);background-repeat: no-repeat;float: left;margin-right: 5px;}#play {background-position: 6px 5px;}#pause {background-position: -32px 5px;}#mute {background-position: -63px 5px;}#muted {background-position: -106px 5px;}input[type="range"] {width: 250px;margin-top: -5px;}#close {float: right;background-position: -146px 5px;display: none;}.volume {position: absolute;height: 100px;width: 34px;border: 1px solid black;background-color: #242323;top: -97px;display: none;}input{display:none\9!important;}input[type="range"] {-webkit-appearance: none;border: 1px solid black;position: absolute;top: 18px;display: block;width: 63%;height: 15px;-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;background-color: #242323;left: 90px;-webkit-box-shadow: inset 0px 4px 4px rgba(0,0,0,.6);-moz-box-shadow: inset 0px 4px 4px rgba(0,0,0,.6);box-shadow: inset 0px 4px 4px rgba(0,0,0,.6);}input::-webkit-slider-thumb {-webkit-appearance: none;width: 20px;height: 20px;border:1px solid black;-webkit-border-radius: 10px;border-radius: 10px;background: #80e4df; /* Old browsers */background: -webkit-linear-gradient(top, #80e4df 0%, #75dbd6 13%, #5ec4bf 33%, #57bbb6 47%, #419d99 80%, #378f8b 100%);background: -moz-linear-gradient(top, #80e4df 0%, #75dbd6 13%, #5ec4bf 33%, #57bbb6 47%, #419d99 80%, #378f8b 100%);background: -o-linear-gradient(top, #80e4df 0%, #75dbd6 13%, #5ec4bf 33%, #57bbb6 47%, #419d99 80%, #378f8b 100%);background: linear-gradient(top, #80e4df 0%, #75dbd6 13%, #5ec4bf 33%, #57bbb6 47%, #419d99 80%, #378f8b 100%); /* W3C */}
创建HTML5音频播放器：jQuery
完成样式和标记后，就该使玩家真正栩栩如生了。 我们可以使用javascript框架jQuery来做到这一点。 声明jQuerydocument ready，我们将创建一些变量，可以在其中存储jQuery对象。
container = $('.container');cover = $('.cover');play = $('#play');pause = $('#pause');mute = $('#mute');muted = $('#muted');close = $('#close');song = new Audio('music/track1.ogg','music/track1.mp3');duration = song.duration;
在上面的“ song”变量中，您可以看到我们已经声明了两条音轨。 Firefox的OGG格式，其他浏览器的MP3。 然后，我创建一个条件IF语句，以便我们可以检查浏览器是否可以播放MP3。 如果可以，那么我们将“ song”变量作为MP3曲目的来源-如果没有，则它将播放“ OGG”格式。
if (song.canPlayType('audio/mpeg;')) {song.type= 'audio/mpeg';song.src= 'music/track1.mp3';} else {song.type= 'audio/ogg';song.src= 'music/track1.ogg';}
接下来要创建的是单击功能，它将使我们能够播放和暂停音乐。 我使用音频动作play()来启动音频，然后使用jQuery方法replaceWith基本上将播放按钮替换为暂停按钮。
我还将“ coverLarge”和“ containerLarge”类添加到“ container”和“ cover”中。 正如我在CSS的较早版本中添加CSS3过渡一样，当音频开始播放时，这将添加一个不错的过渡。 “暂停”功能以类似的方式工作，但是没有过渡。 单击后，它将暂停按钮替换为“播放”按钮。
play.live('click', function(e) {e.preventDefault();song.play();$(this).replaceWith('<a class="button gradient" id="pause" href="" title=""></a>');container.addClass('containerLarge');cover.addClass('coverLarge');$('#close').fadeIn(300);$('#seek').attr('max',song.duration);});pause.live('click', function(e) {e.preventDefault();song.pause();$(this).replaceWith('<a class="button gradient" id="play" href="" title=""></a>');});
静音和静音按钮的工作方式与播放和暂停按钮相似，但是会调用相关的操作，并用适当的替代方法替换这些按钮。
mute.live('click', function(e) {e.preventDefault();song.volume = 0;$(this).replaceWith('<a class="button gradient" id="muted" href="" title=""></a>');});muted.live('click', function(e) {e.preventDefault();song.volume = 1;$(this).replaceWith('<a class="button gradient" id="mute" href="" title=""></a>');});
当用户单击“关闭”按钮时，我们调用jQuery删除“ containerLarge”和“ coverLarge”类。 这将隐藏盖子并关闭播放器。 然后，我们通过调用pause()操作来暂停播放器，并将音频currentTime重置为等于0。这会将音轨重新设置为开头。
$('#close').click(function(e) {e.preventDefault();container.removeClass('containerLarge');cover.removeClass('coverLarge');song.pause();song.currentTime = 0;$('#pause').replaceWith('<a class="button gradient" id="play" href="" title=""></a>');$('#close').fadeOut(300);});
现在是时候进入具有ID“搜索”的音频清理器了。 第一个功能是允许我们将洗涤器移动到音频的任何部分。 这是通过在有人移动洗涤塔时检测到变化来完成的。 然后，我们将song.currentTime设置为与洗涤器已移动到的那部分歌曲匹配。 我们还设置了max属性以反映歌曲的持续时间。
$("#seek").bind("change", function() {song.currentTime = $(this).val();$("#seek").attr("max", song.duration);});
jQuery的最后一部分是使“ #seek”洗涤器与音频持续时间一起移动。 为此，我们添加了一个事件侦听器，并在音频时间更新时调用了该函数。 我设置了一个“ curtime”变量来获取当前的歌曲时间。 然后，我更新清理器的值以反映音频的当前时间位置。
song.addEventListener('timeupdate',function (){curtime = parseInt(song.currentTime, 10);$("#seek").attr("value", curtime);});
在那里，您拥有了！ 您可以在网站或应用中实施HTML5音频播放器。
结论
如前所述，HTML5音频仍处于起步阶段，仍有改进的空间。 目前，音频被设计用于播放音乐，因此将始终从服务器流式传输音频，这导致某些浏览器的播放出现问题。 这并不总是一个问题，只是意味着有时它会在音频完全下载之前开始付款。
如果您想将HTML5音频用于游戏或音频密集型应用中的音效之类的事情，则可能会出现问题。 因此，我们在Google的朋友提出了一种改善音频标签弱点的方法。 Google已经为W3C提出了有关“ Web Audio API”的提案。 事实证明，这比本地HTML5音频功能强大得多，但是问题是，在此阶段（您能猜到吗？！），它只能在Chrome中运行。
您可以阅读有关Google的Web Audio API的更多信息，并在Google代码中查看一些示例，或查看Web音频规范 。
希望您喜欢学习HTML5音频以及如何创建自己的播放器。 我的播放器包含基本控件，但是没有什么可以阻止您添加更多功能，例如音量控制，甚至添加自己的自定义动画。 稍加思考和试验，您实际上可以创建一些出色的音频播放器。 下载源代码 ，我期待着您的光临！
而且，如果您想在HTML5中看到更多与音频播放器和其他媒体一起使用的选项，请查看Envato Market上的HTML5 Media项目。
翻译自: /tutorials/create-a-customized-html5-audio-player--webdesign-7081
自定义音频播放器
