Om du vill att dina webbplatsbesökare ska njuta av en MP3-fil är ett av de enklaste sätten att göra detta att bädda in den på sidan. Med en inbäddad MP3-spelare behöver besökare inte ladda ner ljudet direkt eller använda ytterligare programvara eftersom det spelar inline.
Vi kommer att beskriva olika metoder som du kan använda för att bädda in en MP3 på din webbplats, inklusive att använda HTML5 och Google Drive.
1. Bädda in en MP3 på din webbplats med HTML5
Om du är bekväm med att redigera koden för din webbplats är ett av de enklaste sätten att bädda in en MP3-fil på att använda HTML5.
HTML5
För att bädda in en MP3 med HTML5, använd denna kod:
<audio controls><source src="https://www.makeuseof.com/tag/embed-mp3-player-website/MP3 URL HERE" type="audio/mpeg">Your browser does not support the audio tag.</audio>
Byt bara ut MP3 URL HÄR med din uppladdade ljudfil. Detta kan inte vara en fil lagrad på din dator; den måste finnas tillgänglig online.
Denna kod kommer att placera en liten ljudspelare på sidan, från vilken användaren kan spela, pausa, skrubba och justera volymen. Så här ser det ut i Firefox:
Den här koden innehåller också ett meddelande som visas i stället för mediaspelaren, i den osannolika omständigheten att användarens webbläsare inte stöder spelaren.
Du kan tillämpa attribut som t.ex autospela och slinga, såhär:
<audio controls autoplay loop><source src="https://www.makeuseof.com/tag/embed-mp3-player-website/MP3 URL HERE" type="audio/mpeg">Your browser does not support the audio tag.</audio>
Tänk på att de flesta webbläsare inte stöder automatisk uppspelning eftersom det anses vara dålig praxis att automatiskt tvinga på ljud till användare.
Grundläggande anpassning kan appliceras på ljudspelarblocket via CSS, som gräns och stoppning. Du måste dock använda JavaScript för att utforma själva spelaren korrekt så att den är konsekvent i alla webbläsare.
Mer information om HTML5-ljudspelarens attribut och anpassning finns på MDN Web Docs.
2. Bädda in en MP3 på din webbplats med Google Drive
Google Drive är en utmärkt och free molnlagringsleverantör. Du kan använda den för att ladda upp din MP3-fil och skapa en ljudspelare.
Med MP3 uppladdad till Google Drive:
- Högerklicka filen och klicka Få länk. Ändra tillgänglighetsbegränsningen till Alla som har länken. Slutligen, klicka Kopiera länk.
Detta ger dig en URL som liknar denna:
https://drive.google.com/file/d/123/view?usp=sharing
Byta ut view?usp=delning med förhandsvisning, såhär:
https://drive.google.com/file/d/123/preview
Använd sedan en tagg för att bädda in MP3-spelaren på din webbplats, ersätta DRIVE URL med webbadressen du just redigerade:
<iframe frameborder="0" width="400" height="150" src="https://www.makeuseof.com/tag/embed-mp3-player-website/DRIVE URL"></iframe>
Du kan justera, lägga till eller ta bort attributen (som ramkant och bredd) som nödvändigt.
Detta kommer att bädda in MP3:n på din webbplats med hjälp av Google Drive-spelaren. Användare kan spela, skrubba och justera volymen, precis som med HTML5-spelaren. Så här ser det ut:
Den största skillnaden är närvaron av en poppa ut knapp. Detta öppnar MP3 på Google Drive, där användare kan lägga till kommentarer, dela filen och mer.
3. Bädda in en MP3 på din webbplats med ett CMS
Om du använder ett innehållshanteringssystem (CMS) för din webbplats kan du förmodligen fortfarande använda metoderna ovan. Som sagt, du kanske inte är bekväm med att redigera HTML-kod.
Alla bra CMS låter dig enkelt lägga till ljud till din webbplats via dess gränssnitt. Till exempel på WordPress behöver du helt enkelt lägg till ett block, Välj Audio, och sedan antingen Ladda upp MP3, välj den från din Media bibliotek, eller Infoga från URL.
Oavsett om du använder Google Sites, ExpressionEngine eller en tjänst som Squarespace kommer processen att lägga till ljud att vara något annorlunda, så se till att konsultera företagets hjälpdokumentation för fullständig vägledning.
Låt dina besökare enkelt lyssna på MP3-filer
Genom att använda någon av ovanstående metoder kommer dina webbplatsbesökare nu att kunna lyssna på MP3-filer via en mediaspelare med lätthet.
Som sagt, du behöver inte alltid använda MP3-filer. Det finns många andra vanliga ljudformat, som WAV och FLAC, som du lika gärna kan spela inline på din webbplats.
Om författaren
Joe Keeley (777 publicerade artiklar)
Joe föddes med ett tangentbord i händerna och började genast skriva om teknik. Han har en BA (Hons) i Business och är nu en frilansskribent på heltid som tycker om att göra tekniken enkel för alla.
Mer från Joe Keeley
Prenumerera på vårt nyhetsbrev
Gå med i vårt nyhetsbrev för tekniska tips, recensioner, free e-böcker och exklusiva erbjudanden!
Klicka här för att prenumerera
