自定义音频播放器
在本教程中,我将向您介绍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。 文本字符串您的浏览器不支持音频元素。 让不支持浏览器的用户了解发生了什么。
![](https://i-blog.csdnimg.cn/blog_migrate/1d8cb156c07588e0908aeecb680e6b07.png)
默认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;
}
![](https://i-blog.csdnimg.cn/blog_migrate/25b9be1fa202874ca6d92e871cce39e8.png)
音频播放器在此阶段的外观
播放器的容器完成后,就可以创建实际的控件了。 大多数按钮是使用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
自定义音频播放器