⾃定义⾳频播放器_创建⾃定义HTML5⾳频播放器
⾃定义⾳频播放器
在本教程中，我将向您介绍HTML5⾳频，并向您展⽰如何创建⾃⼰的播放器。
如果您想⾛捷径，请查看Envato市场上可⽤的现成的 。 它使您可以从各种来源创建播放列表，并提供了⼴泛的⾃定义选项。
您还可以在Envato Studio上到⼤量来帮助您。
介绍
到⽬前为⽌，将⾳频实现到Web项⽬中是⼀个繁琐的过程，很⼤程度上依赖于Flash等第三⽅插件。 由于iPhone臭名昭著的是未接受该插件，⽽且有消息称Adobe将不再⽀持移动Flash，因此许多开发⼈员正在寻其他将⾳频整合到其项⽬中的⽅法。 这是HTML5⾳频介⼊解决问题的地⽅。
尽管HTML5提供了⼀种在Web上播放⾳频⽂件的标准，但它仍处于起步阶段，要提供其他插件（如Flash⾳频）提供的所有功能，还有很长的路要⾛。 但是，在⼤多数情况下，这已经⾜够了。
简单HTML5⾳频
使⽤HTML5将⾳频实施到⽹页中的最简单⽅法是使⽤新的标签。 使⽤以下代码将此添加到您HTML5⽂档中：
<audio controls="controls">
<source src="" 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格式特别⽤于允许⾳乐在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⽂档类型组成。 ，标题的 “ Lobster”。 然后，我们有最新的jQuery和⾃定义JavaScript⽂件js.js。 最后，我们有了 ，它使Firefox可以显⽰HTML5输⼊范围类型，该类型将⽤于⾳频器。
<!DOCTYPE html>
<head>
<title>HTML5 Audio Tutorial</title>
<link rel="stylesheet" type="text/css" href="yui.yahooapis/3.3.0/build/cssreset/reset-min.css">
<link href='leapis/css?family=Lobster' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="code.jQuery/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的各个⽅⾯，⽽是给您⼀个概述，并指出您可能需要注意的任何特定部分。
在下⾯的代码中，我为使⽤此⽣成的播放器创建了渐变。 然后，我⽤⼀些CSS3过渡创建了播放器“ .container”。
您会注意到我还使⽤了将CSS3框⼤⼩设置为'border-box'的属性。 这允许容器周围的10px填充被包含在我声明的宽度内，在本例中为427px。 如果我没有使⽤此填充，则会将填充添加到427px中，从⽽使容器⼤于实际所需的尺⼨。 如今，应⽤* {box-sizing: border-box;}已成为⼀种常见的做法* {box-sizing: border-box;}这实际上使样式设计更直观。
我还在“ .coverlarge”中添加了⼀些CSS3过渡，以便在播放器⾸次打开时提供⼀些不错的过渡。 刚开始时，CSS可能看起来有点让⼈不知所措，但是其中很多是特定的浏览器前缀，以确保⾳频播放器在不同的浏览器中看起来和⼯作相同。
.gradient {
js控制animation动画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:adient( startColorstr='#494949', endColorstr='#0b0b0b',GradientType=0 ); /* IE6-9 */
}
创建一个spring项目
.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);
jquery下载文件请求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;
}java数据接口怎么写
.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;
}
⾳频播放器在此阶段的外观
播放器的容器完成后，就可以创建实际的控件了。 ⼤多数按钮是使⽤创建的
不幸的是IE尚不⽀持HTML5范围输⼊，因此我决定不向IE⽤户显⽰⾳频清理器。 如果您处于⽆法接受
的位置，则可以使⽤ ，⽅法与我使⽤的⽅法类似。 尽管如此，我还是选择简单地隐藏洗涤器，因此input{display:none\9!important;}这基本上隐藏了⽤户的输⼊（ 上的获取\9更多信息）。
HTML5范围滑块的问题在于，只有少数浏览器⽀持它的⾃定义样式。 主要是webkit浏览器（Chrome和Safari）。 不幸的是，Opera和Firefox仅会显⽰标准范围滑块。 如果确实需要在所有浏览器上使⽤⾃定义样式，则可以使⽤前⾯提到的 。 您可以在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 {
this is it怎么连读background-position: -63px 5px;
发表评论