Hoe u een gratis mp3-speler op uw website kunt insluiten: 3 manieren

Hoe u een gratis mp3-speler op uw website kunt insluiten: 3 manieren

Als u wilt dat uw websitebezoekers kunnen genieten van een MP3-bestand, is een van de gemakkelijkste manieren om dit te doen, het op de pagina in te sluiten. Met een ingebouwde mp3-speler hoeven bezoekers de audio niet rechtstreeks te downloaden of extra software te gebruiken, omdat deze inline wordt afgespeeld.





We gaan in op verschillende methoden die u kunt gebruiken om een ​​MP3 op uw website in te sluiten, inclusief het gebruik van HTML5 en Google Drive.





1. Sluit een MP3 in op uw website met HTML5

Als u zich op uw gemak voelt bij het bewerken van de code van uw website, is HTML5 een van de gemakkelijkste manieren om een ​​MP3-bestand in te sluiten.





De HTML5 tag lijkt op het eerste gezicht misschien eenvoudig, maar het is krachtig omdat het compatibel is met alle belangrijke desktop- en mobiele browsers.

Gebruik deze code om een ​​MP3 met HTML5 in te sluiten:



Your browser does not support the audio tag.

Gewoon vervangen MP3-URL HIER met uw geüploade audiobestand. Dit kan geen bestand zijn dat op uw computer is opgeslagen; het moet online beschikbaar zijn.

computeronderdelen verkopen voor contant geld bij mij in de buurt

Deze code plaatst een kleine audiospeler op de pagina, van waaruit de gebruiker kan spelen, pauzeren, scrubben en het volume aanpassen. Zo ziet het eruit in Firefox:





Deze code bevat ook een bericht dat wordt weergegeven in plaats van de mediaspeler, in het onwaarschijnlijke geval dat de browser van de gebruiker de speler niet ondersteunt.

U kunt attributen toepassen zoals: automatisch afspelen en lus , zo:





Your browser does not support the audio tag.

Houd er rekening mee dat de meeste browsers autoplay niet ondersteunen, omdat het als een slechte gewoonte wordt beschouwd om gebruikers automatisch audio op te dringen.

Basisaanpassing kan via CSS op het audiospelerblok worden toegepast, zoals grens en opvulling . U moet echter JavaScript gebruiken om de speler zelf op de juiste manier op te maken, zodat deze consistent is in alle browsers.

Meer informatie over de kenmerken en aanpassingen van de HTML5-audiospeler vindt u op MDN-webdocumenten .

hoe homebrew toe te voegen aan wii

Verwant: Coole HTML-effecten die iedereen aan zijn websites kan toevoegen

2. Sluit een mp3 in op uw website met Google Drive

Google Drive is een uitstekende en gratis cloudopslagprovider . U kunt het gebruiken om uw MP3-bestand te uploaden en een audiospeler te maken.

Met de MP3 geüpload naar Google Drive:

  1. Klik met de rechtermuisknop het bestand en klik op Krijg link .
  2. Wijzig de toegankelijkheidsbeperking in Iedereen met de link .
  3. Klik ten slotte op Kopieer link .

Dit geeft je een URL die lijkt op deze:

https://drive.google.com/file/d/123/view?usp=sharing

Vervangen bekijken?usp=delen met voorbeeld , zo:

https://drive.google.com/file/d/123/preview

Gebruik dan een

U kunt de attributen aanpassen, toevoegen of verwijderen (zoals framerand en breedte ) als nodig.

Hiermee wordt de MP3 in uw website ingesloten met behulp van de Google Drive-speler. Gebruikers kunnen spelen, scrubben en het volume aanpassen, net als bij de HTML5-speler. Hier is hoe het eruit ziet:

Het belangrijkste verschil is de aanwezigheid van a eruit springen knop. Dit opent de MP3 op Google Drive, waar gebruikers opmerkingen kunnen toevoegen, het bestand kunnen delen en meer.

3. Sluit een MP3 in op uw website met een CMS

Als je een contentmanagementsysteem (CMS) voor je website gebruikt, kun je waarschijnlijk nog steeds de bovenstaande methoden gebruiken. Dat gezegd hebbende, voelt u zich misschien niet op uw gemak bij het bewerken van HTML-code.

hoe sms-berichten doorsturen op Android

Met elk goed CMS kunt u eenvoudig audio aan uw website toevoegen via de interface. Op WordPress hoeft u bijvoorbeeld gewoon: voeg een blok toe , selecteer Audio , en dan ofwel Uploaden de MP3, selecteer deze uit uw Mediatheek , of Invoegen vanaf URL .

Of u nu Google Sites, ExpressionEngine of een service zoals Squarespace gebruikt, het proces om audio toe te voegen zal iets anders zijn, dus raadpleeg de helpdocumentatie van het bedrijf voor volledige begeleiding.

Laat uw bezoekers gemakkelijk naar mp3's luisteren

Met een van de bovenstaande methoden kunnen uw websitebezoekers nu gemakkelijk naar MP3-bestanden luisteren via een mediaspeler.

Dat gezegd hebbende, je hoeft niet altijd MP3-bestanden te gebruiken. Er zijn veel andere veelgebruikte audioformaten, zoals WAV en FLAC, die u ook inline op uw website kunt afspelen.

Deel Deel Tweeten E-mail De 10 meest voorkomende audioformaten: welke moet je gebruiken?

U kent MP3, maar hoe zit het met AAC, FLAC, OGG of WMA? Waarom zijn er zoveel audiobestandsformaten en is er een beste audioformaat?

Lees volgende
Gerelateerde onderwerpen
  • internet
  • Webontwikkeling
  • Webmasterhulpprogramma's
  • HTML5
Over de auteur Joe Keeley(652 artikelen gepubliceerd)

Joe werd geboren met een toetsenbord in zijn handen en begon meteen over technologie te schrijven. Hij heeft een BA (Hons) in Business en is nu een fulltime freelance schrijver die ervan houdt technologie voor iedereen eenvoudig te maken.

Meer van Joe Keeley

Abonneer op onze nieuwsbrief

Word lid van onze nieuwsbrief voor technische tips, recensies, gratis e-boeken en exclusieve deals!

Klik hier om je te abonneren