HTML5 Audio Player

Demo og download

Musik leveret af: radiOcean

Download Source Files

Denne gratis HTML5 Audio Player fra Nillervision kan indlejres på et hvilket som helst website og understøttes af alle moderne browsere.

Dette produkt er 100% gratis, men hvis du kan lide det så donér venligst et lille beløb. Donationer gør at jeg kan fortsætte med at udvikle gratis ressourcer som denne.

Specifikationer

• Ultra kompakt: Alt CSS og JS fylder kun 4,45 KB (minified)
• Native HTML5 DOM API: Ingen jQuery eller andre ressourcer kræves
• Du behøver ingen viden om JavaScript - bare tilføj links til mp3 files i en playlist-div
• Volume -og progress-sliders (kun synlige når playeren afspiller)
• Responsivt layout
• OGG file fall-back (Valgbart)
• Indbygget fall-back til mp3 download

Sådan gør du

Download og unzip filerne. Zip-filen indeholder én HTML-fil, én CSS-fil og én JavaScript-fil. Du kan vælge at bruge den eksisterende HTML-fil som en template eller paste koden in i din egen HTML-mark-up.

HTML

Indsæt HTML koden herunder i dit dokument.

<div id="audioPlayer"> <audio id="audio"></audio> <div id="trackList"> <!--INSERT YOUR LINKS HERE--> </div> <div id="messages">Wait...</div> <div id="controls"> <button id="stop">STOP</button> <label for="slider">Pos:</label> <input id="slider" type="range" min="0" max="100" value="0" step="1" /><br/> <label for="volKnob">Vol:</label> <input id="volKnob" type="range" min="0" max="10" value="10" step="1" /> </div> </div>

Indsæt links til dine MP3 filer i den div der har ID'et "trackList"

<div id="trackList"> <a href="my-file.mp3">My Track Title</a> <a href="my-other-file.mp3">My Other Track Title</a> </div>

OGG fall-back

Ældre versioner af f.eks. FireFox understøtter ikke MP3. For at optimere browser-support kan du vælge at tilføje en url til en OGG fil som fall-back. Til dette skal du bruge en data-attribut, selve href-attributen skal altid være en MP3-fil)

<a href="my-file.mp3" data-oggfallback="my-file.ogg">My Track Title</a>

CSS og JavaScript filerne

For at det hele skal virke skal du indsætte et link i dit dokument til de downloadede CSS og JS filer.

Linket til CSS filen bør indsættes et sted i mellem dine head tags i dit dokument

<link rel="stylesheet" href="audioplayer.css" type="text/css" media="all" />

Linket til JS filen kan indsættes enten i head eller body element, men jeg anbefaler at indsætte det, sidst i HTML koden, lige før body tagget lukkes.

<script type="text/javascript" src="audioplayer.js"></script>

Bemærk at filerne findes i minified format hvis du ønsker at optimere sidens load-tid.