本文是一篇关于如何使用HTML5、CSS和jQuery创建自定义音频播放器的教程。作者首先介绍了HTML5音频标签的基础知识，然后逐步讲解如何通过JavaScript和CSS实现播放、暂停、循环等控制功能，以及自定义播放器的样式。虽然HTML5音频仍处于发展阶段，但通过这样的自定义，开发者可以创建功能丰富的音频体验。
自定义音频播放器
在本教程中，我将向您介绍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="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="http://code.jQuery.com/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来做到这一点。 声明jQuery document 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项目。
翻译自: https://webdesign.tutsplus.com/tutorials/create-a-customized-html5-audio-player--webdesign-7081
自定义音频播放器
5467
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
