Gratis HTML5 audio player | Nillervision

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.

paypal

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.

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

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)

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

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.

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

Skrevet af:
Udgivet:
Senest opdateret:

Besøg mine sponsorer

Alle downloads og tutorials på denne side er gratis

Du kan hjælpe mig med at publicere mere gratis indhold ved at donere her

paypal

Er du studerende med begrænsede midler kan du støtte mig ved at klikke på en af reklamerne.