Pålitliga WordPress-handledningar, när du behöver dem som mest.
Nybörjarguide till WordPress
WPB Cup
25 miljoner+
Webbplatser som använder våra plugins
16+
År av WordPress-erfarenhet
3000+
WordPress-handledningar
av experter

Hur man lägger till en ljudmusikspelare-widget i WordPress (2 metoder)

Om du är musiker, poddare eller driver en blogg där ljud spelar en stor roll, har du förmodligen märkt att WordPress standardljud är ganska begränsat.

Du kan ladda upp filer, visst. Men att skapa den där polerade, sömlösa lyssningsupplevelsen som dina besökare förtjänar? Det är där det blir knepigt.

Vi har sett denna utmaning dyka upp om och om igen när vi har hjälpt till att lansera musikbloggar och podcast-webbplatser.

Lyckligtvis finns det enkla lösningar som fungerar. Efter att ha undersökt de bästa musikverktygen och plugins hittade vi 2 enkla alternativ: ljudblocket och HTML5 Audio Player-pluginet.

I den här guiden går vi igenom 2 metoder för att lägga till en ljudmusikspelare-widget i WordPress. På så sätt kan du välja den som passar dina behov och ha din ljudspelare igång på nolltid. 🎶

Hur man lägger till en ljudmusikspelare-widget i WordPress

Varför lägga till en ljudmusikspelare-widget i WordPress

En widget för ljudspelare gör det enkelt för besökare att lyssna på ditt innehåll utan att lämna din webbplats.

Det är särskilt användbart för musiker, podcasters och innehållsskapare som vill visa upp sitt arbete på ett professionellt och tillgängligt sätt. Istället för att skicka folk till externa plattformar kan du hålla dem engagerade på din egen webbplats, där du har mer kontroll.

En ljudmusikspelare kan till och med hjälpa dig att tjäna mer pengar genom att visa annonser på din webbplats eller sälja dina ljudfiler som digitala nedladdningar direkt.

📝 Insidertips: Många av våra partner varumärken på Awesome Motive använder Easy Digital Downloads för att sälja sin programvara. Det är en utmärkt plattform för att tjäna pengar på digitala skapelser som ljudfiler direkt från din webbplats.

Se vår detaljerade recension av Easy Digital Downloads för att lära dig mer om det.

Och om du inte skapar originellt ljud, är det fortfarande ett smart sätt att göra din webbplats mer dynamisk och engagerande att bädda in spår från plattformar som Spotify.

Bädda in EmbedPress' Spotify-spelare på en live-webbplats

Det kan hjälpa till att hålla besökare längre på din webbplats, vilket förbättrar viktiga mätvärden som tid på webbplatsen.

Bäst av allt, ljudwidgets är inte bara för musik. 💡

Du kan använda dem för att bädda in podcaster, ljudböcker, guidade meditationer eller utbildningsinnehåll. Detta gör din webbplats mer mångsidig och tilltalande för ljudförstärkta användare, inklusive de med synnedsättning.

Med det i åtanke kommer vi att visa dig hur du lägger till en ljudmusikspelare i WordPress med 2 metoder. Du kan använda snabblänkarna nedan för att hoppa direkt till den metod du vill använda:

Låt oss utforska hur du kan ge kraften av musik till din WordPress-webbplats! 🎧

Metod 1. Hur man lägger till en ljudmusikspelare-widget med hjälp av ljudblocket (enkelt)

Med den här metoden kan du skapa en enkel ljudspelare med hjälp av det inbyggda WordPress-ljudblocket. Detta block kan spela alla ljudfilformat, inklusive .mp3, .m4a, .ogg eller .wav-filer.

WordPress inbyggda ljudspelare är mycket enkel jämfört med de flesta plugins. Den har en play/paus-knapp, volymkontroller, en nedladdningsknapp och en knapp för att ändra uppspelningshastigheten.

En musikspelare-widget skapad med hjälp av ljudblocket

Det är ett bra val om du vill lägga till några korta ljudklipp på din webbplats utan att behöva några avancerade funktioner.

Om du bäddar in innehåll från en stödd tredjepartsplattform som Spotify eller SoundCloud, kommer ljudblocket att visa uppspelningskontrollerna för den plattformen. Det kan också visa extra innehåll från plattformen, som artistens namn och omslagsbilden.

Till exempel, här är ett ljudblock med inbäddat SoundCloud-innehåll.

Ljudspelare med inbäddat SoundCloud-innehåll

För att lägga till en enkel ljudmusikspelare på din WordPress-webbplats kan du öppna vilken sida eller inlägg som helst och klicka på '+' ikonen.

I popup-fönstret som visas, skriv in 'Audio' i sökfältet för att hitta rätt block. Du kan sedan klicka på ljudblocket för att lägga till det på din sida.

Det inbyggda WordPress-ljudblocket

Vid det här laget kan du antingen lägga till en ljudfil eller bädda in ett ljudklipp från en annan plattform.

📝 Notera: I de flesta fall rekommenderar vi att du hostar dina ljud- och videofiler på en tredjepartssida av många anledningar, inklusive kvalitetsoptimering och bandbreddsbesparing. Här är varför du aldrig bör ladda upp en video till WordPress.

För att lägga till en ljudfil från din dator klickar du på 'Ladda upp' och väljer sedan filen från din dators lokala enhet.

Ett annat alternativ är att klicka på knappen 'Mediebibliotek' och sedan välja en befintlig fil i ditt WordPress-mediebibliotek.

Ladda upp en ljudfil till din WordPress-webbplats

Om du laddar upp hela ljudet kanske du vill ge besökarna möjlighet att stödja ditt arbete som musiker eller poddare genom att skicka en donation. För en steg-för-steg-guide kan du se vår guide om hur man lägger till en Stripe-donationsknapp i WordPress.

Vill du bädda in ljud från en annan plattform istället?

Detta fungerar som att lägga till videor i WordPress. Du klistrar bara in YouTube-länken, och WordPress kommer automatiskt att placera spelaren på din sida.

Var bara medveten om att de flesta plattformar bara bäddar in en förhandsgranskning av hela ljudfilen. Blockeringen kan till och med uppmuntra folk att lämna din webbplats och besöka tredjepartsplattformen för att höra hela ljudet.

I följande bild leder ljudblocket besökare mot Spotify-webbplatsen.

En Spotify-spellista inbäddad i WordPress

Om du är musiker kan detta öka dina royalties genom att uppmuntra besökare att spela ditt innehåll på andra plattformar. Det kan dock också driva bort folk från din webbplats och till andra plattformar.

För att bädda in ljud från en tredjepartsplattform kan du börja med att klicka på knappen ‘Infoga från URL’. Detta öppnar ett litet fält ‘Klistra in eller skriv URL’.

Klistra in en ljudfil med en URL

Du kan nu ange URL:en för ljudklippet som du vill bädda in på din WordPress-blogg.

Vanligtvis behöver du bara besöka låten eller ljudet du vill bädda in och sedan öppna dess 'Dela'-inställningar.

Därefter kan du kopiera den angivna URL:en.

Låt oss till exempel se hur du kan bädda in valfri Spotify-låt på din webbplats.

För att börja, hitta låten eller spellistan du vill lägga till på din WordPress-webbplats. Klicka sedan helt enkelt på de tre prickarna som Spotify visar bredvid spellistan eller låten.

Lägga till Spotify-ljud på en WordPress-webbplats

När du har gjort det, klicka på Dela » Kopiera låt.

För att lägga till ljudet i widgeten för musikspelare, klistra in länken i ljudblocket.

Spotifys 'Dela'-URL

I vårt Spotify-exempel kommer WordPress att omvandla ljudblocket till ett Spotify-block.

Den här ändringen sker automatiskt, så det är inget du behöver oroa dig för.

WordPress Spotify-blocket

Efter att ha lagt till en ljudfil kan du klicka på ljudblocket för att se vilka inställningar du kan konfigurera för det blocket.

Inställningarna du ser kan variera beroende på om du laddade upp en ljudfil eller bäddade in en förhandsgranskning från en tredjepartssida.

Till exempel kan du ofta ställa in ljudet att spelas automatiskt genom att klicka på växlingsknappen 'Autoplay'.

WordPress inställningar för automatisk uppspelning och loop

De flesta av dessa inställningar är självförklarande, så det är en bra idé att utforska dem för att se vad som fungerar bäst för din webbplats.

Du kan uppdatera eller publicera sidan när du är nöjd med hur blocket är konfigurerat.

Nu, om du besöker sidan på din webbplats, kommer du att se ljudmusikspelaren live. Du kan också lyssna på ljudet med hjälp av blockets uppspelningskontroller.

Metod 2. Hur man lägger till en ljudmusikspelare-widget med ett plugin (mer anpassningsbar)

WordPress ljudblock är ett enkelt verktyg för att lägga till ljudspelare. Det är lätt att använda, men det erbjuder inte många alternativ för att ändra hur det ser ut eller fungerar.

Dessutom kan du inte skapa en spelare och använda den i olika delar av din webbplats. Du måste lägga till en ny spelare varje gång du vill använda en.

Om du vill ha mer avancerade funktioner och återanvändbara ljudspelare, rekommenderar vi pluginet HTML5 Audio Player.

Liknande WordPress ljudblock kan detta plugin spela olika ljudfilformat, som en .mp3, .wav eller .ogg-fil. Men det kommer med fler anpassningsalternativ.

Även om pluginet bara kan spela en ljudfil per spelare, kan du skapa så många ljudspelare som du vill. På så sätt kan du fortfarande spela många olika spår på din WordPress-webbplats. Du kan till och med lägga till flera ljudspelare på samma sida.

Flera ljudspelare på en enda sida

För att komma igång måste du installera och aktivera pluginet. Om du behöver hjälp, se vår guide om hur man installerar ett WordPress-plugin.

Efter aktivering är du redo att bygga din första ljudspelare genom att gå till HTML5 Audio Player » HTML5 Audio Player.

Här, klicka på knappen 'Lägg till ljudspelare'.

Lägga till en ljudspelare på din WordPress-webbplats

Nästa steg är att skriva ett namn för ljudspelaren i fältet som visar ‘Lägg till titel.’

Detta är bara för din referens, så du kan använda vilken titel du vill.

Skapa en ljudspelare-widget med ett plugin

När du har gjort det vill du skrolla ner till avsnittet 'Spelarkonfiguration'.

I det här området kan du lägga till en ljudfil i spelaren genom att klicka på knappen 'Lägg till ljud'.

Lägga till en ljudfil i HTML5-spelaren

Du kan nu välja vilken ljudfil som helst från mediabiblioteket eller ladda upp en fil från din dator.

Efter att ha valt en fil är du redo att anpassa ljudspelaren. Som standard behöver besökaren bara klicka på 'Spela'-knappen, så börjar ljudet spelas med volymen uppskruvad.

Så här förväntar sig de flesta besökare att en ljudspelare ska fungera, så du vill vanligtvis använda dessa standardinställningar. Det finns dock också alternativ för att stänga av ljudet som standard, autospelet, upprepning och mer. Så utforska gärna dessa inställningar.

När du är nöjd med hur spelaren är inställd, scrolla helt enkelt till toppen av skärmen och klicka på knappen 'Spara'.

Lägga till en ny ljudspelare på din WordPress-webbplats

Sedan kan du lägga till ljudspelaren på din webbplats med antingen kortkod eller HTML5-ljudspelarblocket.

Blocket är den enklaste metoden. Men om du vill placera spelaren med en kortkod hittar du koden högst upp på skärmen.

För mer information om hur du placerar kortkoden kan du se vår guide om hur man lägger till en kortkod i WordPress.

Placera en ljudspelare-widget med kortkod

För att lägga till ljudmusikspelaren med ett block måste du öppna valfri sida eller inlägg och klicka på '+'-knappen.

I popup-fönstret som visas, skriv helt enkelt ‘HTML5 Audio Player’ för att hitta rätt block. När du klickar på blocket ‘HTML5 Audio Player – Infoga’, läggs blocket till på din sida.

Lägga till ett ljudspelarkvarter i din WordPress-webbplats

Därefter kan du öppna rullgardinsmenyn 'Välj en spelare' för att se listan över alla ljudspelare som du har skapat.

Du kan nu klicka på en ljudspelare för att lägga till den på sidan eller i inlägget.

Ett HTML5 WordPress-ljudblock

Du kanske då märker att WordPress sidredigerare inte visar ljudspelaren.

Om du däremot klickar på knappen ‘Förhandsgranska’, då kommer du att kunna se hur spelaren kommer att se ut för dina webbplatsbesökare. I det här läget kan du till och med lyssna på ljudet och testa de olika uppspelningsknapparna själv.

Förhandsgranskning av ljudmusikwidgeten

När du är nöjd med hur ljudspelaren ser ut och fungerar kan du uppdatera eller publicera sidan.

Nu, om du besöker den här sidan på din WordPress-webbplats, kommer du att se ljudspelaren live.

Vill du lägga till fler ljudspår på din webbplats? Då kan du helt enkelt följa processen som beskrivs ovan för att skapa fler ljudspelare och lägga till dem på din webbplats.

Bonustips: Gör din webbplats roligare med bild- och videogallerier

Vill du göra din webbplats roligare och mer engagerande? Överväg att lägga till bild- och videogallerier som kompletterar din widget för musikspelare.

Genom att skapa ett galleri kan du visa upp dina foton i ett snyggt rutnätsformat, vilket sparar utrymme och får din webbplats att se mycket mer professionell ut. Tumnaglar låter besökare förhandsgranska bilder, och de kan klicka för att se dem i full storlek.

Till exempel, om du är en fotograf, kan ett välorganiserat galleri visa upp ditt arbete på ett elegant, visuellt imponerande sätt.

Nu är det ganska enkelt att lägga till bilder i dina WordPress-inlägg med bildblocket. Men saker kan bli lite röriga när du lägger till flera bilder. De kommer att staplas efter varandra, vilket kräver att användarna scrollar mycket.

Det är definitivt inte den mest visuellt tilltalande installationen. 😬

Försök istället att använda Galleri-blocket i Gutenberg-redigeraren. Det är ett enkelt sätt att visa flera bilder på ett renare sätt. Och om du vill ha ännu fler funktioner finns det gott om galleri-plugins som kan ta din bildvisning till nästa nivå, som Envira Gallery.

Bildgalleri på en WordPress-webbplats

För detaljerade instruktioner, se vår guide om hur man skapar ett bildgalleri i WordPress.

Dessutom, medan bilder är bra, kan videor vara ännu bättre. En videoslider kan visa allt från produktdemonstrationer och recensioner till kundrecensioner, allt i ett dynamiskt utrymme.

Till exempel kan en fastighetswebbplats visa virtuella fastighetsturer. Samtidigt kan en resewebbplats lyfta fram destinationer och upplevelser för att locka besökare.

Med en videoslider kan du använda engagerande innehåll för att visa upp dina bästa funktioner, oavsett om det är vittnesmål, fallstudier eller produktframhävningar. Det bästa? Soliloquy kan hjälpa dig att skapa en med lätthet.

För att lära dig mer, kolla in vår guide om hur man skapar en videobildspel i WordPress.

Sammantaget, oavsett om det är ett albumgalleri, en produktvisning eller videoguider, kan interaktiva gallerier öka din webbplats övergripande attraktionskraft och förbättra användarupplevelsen.

Vanliga frågor: Hur man lägger till en ljudspelare-widget i WordPress

Vi har fått många frågor om att lägga till ljud i WordPress. Här är svaren på några av de vanligaste.

Vilket är det bästa ljudfilformatet för WordPress?

För bästa balans mellan ljudkvalitet och filstorlek rekommenderar vi att du använder MP3-formatet. Det stöds brett av alla moderna webbläsare och enheter. På så sätt kan dina besökare njuta av en smidig lyssningsupplevelse oavsett hur de besöker din webbplats.

Kan jag skapa en spellista med flera låtar?

Ja, det kan du. Medan standardblocket för ljud i WordPress är utformat för enstaka spår, låter många plugins dig skapa fullständiga spellistor. Vissa plugins ansluter till och med till tjänster som Spotify eller SoundCloud för att visa hela album på din webbplats.

Hur kan jag lägga till en ljudspelare i min WordPress-sidofält?

Du kan lägga till en ljudspelare i din sidofält eller sidfot med hjälp av WordPress-widgets.

Navigera bara till Utseende » Widgetar i din instrumentpanel. Därifrån kan du lägga till ljudblocket eller ett block från ditt valda plugin till valfritt widget-redo område i ditt tema.

Navigera till menyn Utseende > Widgetar och välj Sidofält i WordPress adminpanel

Fler guider om att använda ljud på WordPress

Vi hoppas att den här artikeln har hjälpt dig att lära dig hur du lägger till en ljudspelare-widget i WordPress. Om du fann detta hjälpsamt, kanske du också vill läsa våra andra guider om:

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.

Upplysning: Vårt innehåll stöds av läsarna. Det innebär att om du klickar på några av våra länkar kan vi tjäna en provision. Se hur WPBeginner finansieras, varför det är viktigt och hur du kan stödja oss. Här är vår redaktionella process.

Det ultimata WordPress-verktyget

Få GRATIS tillgång till vår verktygslåda - en samling WordPress-relaterade produkter och resurser som alla proffs bör ha!

Läsarnas interaktioner

6 CommentsLeave a Reply

  1. Tack för den här guiden. Jag har många av mina texter på webbplatsen konverterade till talat språk med hjälp av artificiell intelligens, och jag undrade hur jag skulle integrera dem på webbplatsen. Den första metoden med blockredigeraren verkar bra eftersom den är icke-invasiv när det gäller webbplatsens utseende. Utmärkt. Tack för tipsen.

  2. Hej, jag prenumererar på WPBeginner
    och uppskattar dina bidrag till Wordpress-communityt – jag anser att de är
    oersättliga.

    Hur kommer det sig då att ni, herrn, i den nuvarande osäkra och hackarinfekterade internetmiljön, rekommenderar plugins (en widget i det här fallet) som inte är uppdaterade?

    Jag får dagligen mängder av brute force-attacker på mina
    webbplatser och jag anser att användning och rekommendation av föråldrade plugins är
    oansvarigt.

Lämna ett svar

Tack för att du väljer att lämna en kommentar. Tänk på att alla kommentarer modereras enligt vår kommentarspolicy, och din e-postadress kommer INTE att publiceras. Använd INTE nyckelord i namn fältet. Låt oss ha en personlig och meningsfull konversation.