Jag minns fortfarande att det i början av 2000-talet hade många begränsningar att spela rich media (ljud och video) online. Det är lätt att ta början för given, speciellt eftersom vi nuförtiden har många sätt att spela upp ljud, dvs last.fm eller spela upp videor som Youtube.
I det här inlägget kommer vi, som titeln antyder, att skapa Web Audio Player. Om du har en poddsändningswebbplats och vill skapa en mediaspelare som passar in i din övergripande webbdesign är det här inlägget förmodligen något för dig.
Klicka på Demo-knappen för att se hur ljudspelaren kommer att se ut.
Vad vi behöver
Innan vi skapar ljudspelaren måste vi förbereda några nyckelelement: den jPlayer, jQuery och en uppsättning teckensnittsikoner som kallas KällaAwesome.
Först av allt, låt oss gå ladda ner jplayer. jPlayer är ett jQuery-plugin som låter oss köra rich media på vår webbplats utan problem. Så länge du kan HTML och CSS är du bra att gå.
Rekommenderad läsning: Kolla in våra HTML/CSS3-handledningar.
jPlayer är i huvudsak ett jQuery-plugin, så vi behöver också ladda ner jQuery för att det ska fungera, och i skrivande stund har jQuery för närvarande version 1.8.2. Vi behöver också några ikoner för mediaspelarens GUI, och den här gången kommer vi att använda FontAwesome att leverera ikonerna.
Efter det extraherar vi alla nedladdade filer och placerar allt inklusive jPlayer, jQuery-filer och typsnitt i en lämplig mapp. Länka sedan jquery.js och jquery.jplayer.min.js till html-dokumentet, som visas nedan.
<link rel="stylesheet" href="https://www.hongkiat.com/blog/web-audio-player/css/normalize.css"> <link type="text/css" href="css/style.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
Som du kan se har vi förutom jQuery- och jPlayer-biblioteket även länkat två CSS-filer dit. Den första, normalize.css, återställer eller normaliserar webbläsarstilar, så vår webbsida kommer att visas mer konsekvent i alla webbläsare, medan den andra, style.css är där vi placerar våra huvudstilar.
Ljudet
För demonstrationen i denna handledning kommer vi att använda ljudet från Kelli Andersson från hans presentation på TEDx Pheonix. Tja, det är faktiskt en video, men du kan bara extrahera ljudet genom ett av följande verktyg: Easy Youtube Downloader (FF Extension) antingen KeepVid.com.
Strukturera HTML-uppmärkning
Nu är det dags att strukturera HTML-uppmärkningen för ljudspelaren och nedan är HTML-uppmärkningen vi behöver. Det viktiga med denna uppmärkning är attributet id=jquery_jplayer_1 som tilldelas i div som innehåller alla dessa. Detta id används för att binda denna struktur till jPlayer senare via jQuery-funktionen.
Dessutom är alla klasser mappade i följande struktur, inklusive jp-play, jp-pause, jp-mute och jp-unmute, alla standardklasser som används i jPlayer. Jag föreslår att du inte ändrar dessa klasser eller id-attributet för att göra saker enklare när vi designar ljudspelaren senare (om du inte riktigt vet vad du gör).
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio">
<div class="jp-type-single">
<div class="jp-title">
<ul>
<li>TEDxPhoenix - Kelli Anderson - Disruptive Wonder for a Change</li>
</ul>
</div>
<div class="jp-gui jp-interface">
<ul class="jp-controls">
<li><a href="https://www.hongkiat.com/blog/web-audio-player/javascript:;" class="jp-play" tabindex="1"></a></li>
<li><a href="https://www.hongkiat.com/blog/web-audio-player/javascript:;" class="jp-pause" tabindex="1"></a></li>
<li><a href="https://www.hongkiat.com/blog/web-audio-player/javascript:;" class="jp-mute" tabindex="1" title="mute"></a></li>
<li><a href="https://www.hongkiat.com/blog/web-audio-player/javascript:;" class="jp-unmute" tabindex="1" title="unmute"></a></li>
</ul>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-time-holder">
<div class="jp-current-time"></div>
</div>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
<div class="jp-no-solution">
<span>Update Required</span>
To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
</div>
</div>
</div>
Om du tittar närmare på denna HTML-struktur hittar du följande tecken , , och . Dessa tecken är speciella HTML-nummer som refererar till och representerar ikontecken som kommer från FontAwesome.
Vi täckte detta ämne i vårt tidigare inlägg: CSS3 Tutorial: Skapa en snygg på/av-knapp.
Aktiverar ljudspelaren
Sedan, när HTML-uppmärkningen har rensats, behöver vi helt enkelt aktivera spelaren med följande skript. I det här skriptet har vi tillhandahållit ljudkällorna och som du kan se nedan har vi lagt till två källor, mp3 och oga. Oga-formatet kommer att utöka kompatibiliteten mellan webbläsare, särskilt i Firefox och Opera.
$(document).ready(function(){
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
mp3: "audio/TEDxPhoenix-KelliAnderson-DisruptiveWonderforaChange.mp3",
oga: "audio/TEDxPhoenix-KelliAnderson-DisruptiveWonderforaChange.ogg"
});
},
swfPath: "/js",
supplied: "mp3,oga"
});
});
Efter att ha lagt till det här skriptet kan ljudet nu spelas och om vi inspekterar HTML-uppmärkningen med Firebug eller andra utvecklingsverktyg kan vi hitta ett nytt HTML5-element som också genereras.
Designa spelaren
I det här avsnittet börjar vi lägga till stilar för att få ljudspelaren att se bättre ut, och vi börjar med att definiera den nya teckensnittsfamiljen och ta bort understrykningen från ankarelementet, så här.
@font-face {
font-family: "FontAwesome";
src: url("fonts/fontawesome-webfont.eot");
src: url("fonts/fontawesome-webfont.eot?#iefix") format("eot"),
url("fonts/fontawesome-webfont.woff") format("woff"),
url("fonts/fontawesome-webfont.ttf") format("truetype"),
url("fonts/fontawesome-webfont.svg#FontAwesome") format("svg");
font-weight: 400;
font-style: normal;
}
a {
text-decoration: none;
}
.jp-jplayer,.jp-audio {
width: 420px;
margin: 50px auto;
}
Ljudtitel
Vi kommer inte att ändra stilen på det här avsnittet mycket, eftersom det bara innehåller textrubriken för ljudet som spelas. Vi gör bara titeltexten mindre och gör den grå.
.jp-title {
font-size: 12px;
text-align: center;
color: #999;
}
.jp-title ul {
padding: 0;
margin: 0;
list-style: none;
}
GUI-behållare
Ljudspelarens GUI finns i en div som är tilldelad jp-gui-klassen. Du kan se i skärmdumpen ovan hur vår mediaspelare kommer att se ut. Vi tillämpar gradientfärger för GUI-temat och använder detta färgnummer för startfärgen #f34927 och #dd3311 för slutfärgen. Se också till att positionsegenskapen för denna div är inställd på relativ.
.jp-gui {
position: relative;
background: #f34927;
background: -moz-linear-gradient(top, #f34927 0%, #dd3311 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f34927), color-stop(100%,#dd3311));
background: -webkit-linear-gradient(top, #f34927 0%,#dd3311 100%);
background: -o-linear-gradient(top, #f34927 0%,#dd3311 100%);
background: -ms-linear-gradient(top, #f34927 0%,#dd3311 100%);
background: linear-gradient(to bottom, #f34927 0%,#dd3311 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#f34927", endColorstr="#dd3311",GradientType=0 );
-webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, .1);
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, .1);
border-radius: 3px;
overflow: hidden;
margin-top: 10px;
}
GUI-kontroll
Kontrollsektionen av GUI innehåller användargränssnittet som styr ljudet, såsom play- och pausknappen, volymen och mute-knappen. I det här avsnittet ställer vi in egenskapen font-family till KällaAwesomeoch ändra textfärgen till vit och lägg till textskuggan.
.jp-controls {
padding: 0;
margin: 0;
list-style: none;
font-family: "FontAwesome";
text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
}
.jp-controls li {
display: inline;
}
.jp-controls a {
color: #fff;
}
Spela och pausa-knapp
För uppspelnings- och pausknappen samt volymknappen kommer vi att ställa in dess position till absolut, vilket är anledningen till att vi ställer in .jp-gui till relativ tidigare. Därför kommer placeringen av dessa knappar att vara i förhållande till deras närmaste förälder och inte till webbläsarfönstret.
.jp-play,.jp-pause {
width: 60px;
height: 40px;
display: inline-block;
text-align: center;
line-height: 43px;
border-right: 1px solid #d22f0f;
}
.jp-controls .jp-play:hover,.jp-controls .jp-pause:hover {
background-color: #de3918;
}
.jp-mute,.jp-unmute {
position: absolute;
right: 55px;
top: 0;
width: 20px;
height: 40px;
display: inline-block;
line-height: 46px;
}
.jp-mute {
text-align: left;
}
.jp-time-holder {
color: #FFF;
font-size: 12px;
line-height: 14px;
position: absolute;
right: 90px;
top: 14px;
text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
}
Förloppsindikator och volym
Förloppsindikatorn kommer att se likadan ut, de är bara olika i storlek. Självklart bör framstegen vara längre och större än volymstapeln.
.jp-progress {
background-color: #992E18;
border-radius: 20px 20px 20px 20px;
overflow: hidden;
position: absolute;
right: 133px;
top: 15px;
width: 210px;
-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2) inset;
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2) inset;
}
.jp-play-bar {
height: 12px;
background-color: #fff;
border-radius: 20px 20px 20px 20px;
}
.jp-volume-bar {
position: absolute;
right: 10px;
top: 17px;
width: 45px;
height: 8px;
border-radius: 20px 20px 20px 20px;
-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1) inset;
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1) inset;
background-color: #992E18;
overflow: hidden;
}
.jp-volume-bar-value {
background-color: #fff;
height: 8px;
border-radius: 20px 20px 20px 20px;
}
Det är alla koder vi behöver. Nu kan du titta på demon och ladda ner källkoden från länkarna nedan.
