Gratis HTML5 Audio Player fra Nillervision

Musik leveret af: radiOcean

Download Source Files

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 ressources som denne.

paypal

Specifikationer

  • Ren HTML5 og JavaScript (ingen jQuery eller andre scripts er nødvændige)
  • 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
  • Valgbart OGG file fall-back kan specificeres
  • Indbygget fall-back til mp3 download i ikke-HTML5 browsere

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.

Brug af den eksisterende HTML-template:

Find den div der har et id ved navn "trackList" i HTML koden og indsæt links til dine mp3 filer i denne div:

<a href="myfile.mp3">My Title</a> 

Ældre verstoner af FireFox understøtter ikke native 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="myfile.mp3" data-oggfallback="myfile.ogg">My Title</a> 

Brug af playeren i dine egne HTML-sider

Indsæt et link til CSS -og JavaScript-filerne et sted i mellem dine head tags i dit dokument:

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

Indsæt derefter følgende HTML mellem dine body tags hvor du ønsker playeren skal være på din side. Bemærk: Du kan kun indsætte én player på en side, men der er ingen grænser for hvor mange lydfiler du kan bruge i playlisten.

<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> 

Insert links til lyd-filerne som beskrevet før.

Bemærk at du ikke kan hotlinke JS and CSS filerne fra denne server - download og filerne og upload dem til din egen server