{"id":95616,"date":"2022-10-16T15:39:45","date_gmt":"2022-10-16T20:39:45","guid":{"rendered":"https:\/\/blogging-techies.com\/sw\/hur-man-baddar-in-en-free-mp3-spelare-pa-din-webbplats-3-satt\/"},"modified":"2022-10-16T15:39:45","modified_gmt":"2022-10-16T20:39:45","slug":"hur-man-baddar-in-en-free-mp3-spelare-pa-din-webbplats-3-satt","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/sw\/hur-man-baddar-in-en-free-mp3-spelare-pa-din-webbplats-3-satt\/","title":{"rendered":"Hur man b\u00e4ddar in en Free MP3-spelare p\u00e5 din webbplats: 3 s\u00e4tt"},"content":{"rendered":"
\n

Om du vill att dina webbplatsbes\u00f6kare ska njuta av en MP3-fil \u00e4r ett av de enklaste s\u00e4tten att g\u00f6ra detta att b\u00e4dda in den p\u00e5 sidan. Med en inb\u00e4ddad MP3-spelare beh\u00f6ver bes\u00f6kare inte ladda ner ljudet direkt eller anv\u00e4nda ytterligare programvara eftersom det spelar inline.<\/p>\n

Vi kommer att beskriva olika metoder som du kan anv\u00e4nda f\u00f6r att b\u00e4dda in en MP3 p\u00e5 din webbplats, inklusive att anv\u00e4nda HTML5 och Google Drive.<\/p>\n

<\/span> 1. B\u00e4dda in en MP3 p\u00e5 din webbplats med HTML5<\/span><\/h2>\n

Om du \u00e4r bekv\u00e4m med att redigera koden f\u00f6r din webbplats \u00e4r ett av de enklaste s\u00e4tten att b\u00e4dda in en MP3-fil p\u00e5 att anv\u00e4nda HTML5.<\/p>\n

HTML5 <\/strong> taggen kan verka grundl\u00e4ggande vid f\u00f6rsta anblicken, men den \u00e4r kraftfull eftersom den \u00e4r kompatibel med alla st\u00f6rre dator- och mobilwebbl\u00e4sare.<\/p>\n

F\u00f6r att b\u00e4dda in en MP3 med HTML5, anv\u00e4nd denna kod:<\/p>\n

<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><\/pre>\n
Byt bara ut MP3 URL H\u00c4R<\/strong> med din uppladdade ljudfil.  Detta kan inte vara en fil lagrad p\u00e5 din dator;  den m\u00e5ste finnas tillg\u00e4nglig online.<\/p>\n
Denna kod kommer att placera en liten ljudspelare p\u00e5 sidan, fr\u00e5n vilken anv\u00e4ndaren kan spela, pausa, skrubba och justera volymen.  S\u00e5 h\u00e4r ser det ut i Firefox:<\/p>\n
\n<\/figure>\n
Den h\u00e4r koden inneh\u00e5ller ocks\u00e5 ett meddelande som visas i st\u00e4llet f\u00f6r mediaspelaren, i den osannolika omst\u00e4ndigheten att anv\u00e4ndarens webbl\u00e4sare inte st\u00f6der spelaren.<\/p>\n
Du kan till\u00e4mpa attribut som t.ex autospela<\/strong> och slinga<\/strong>, s\u00e5h\u00e4r:<\/p>\n
<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><\/pre>\n
T\u00e4nk p\u00e5 att de flesta webbl\u00e4sare inte st\u00f6der automatisk uppspelning eftersom det anses vara d\u00e5lig praxis att automatiskt tvinga p\u00e5 ljud till anv\u00e4ndare.<\/p>\n
Grundl\u00e4ggande anpassning kan appliceras p\u00e5 ljudspelarblocket via CSS, som gr\u00e4ns<\/strong> och stoppning<\/strong>.  Du m\u00e5ste dock anv\u00e4nda JavaScript f\u00f6r att utforma sj\u00e4lva spelaren korrekt s\u00e5 att den \u00e4r konsekvent i alla webbl\u00e4sare.<\/p>\n
Mer information om HTML5-ljudspelarens attribut och anpassning finns p\u00e5 MDN Web Docs.<\/p>\n
<\/span>  2. B\u00e4dda in en MP3 p\u00e5 din webbplats med Google Drive<\/span><\/h2>\n
Google Drive \u00e4r en utm\u00e4rkt och free molnlagringsleverant\u00f6r.  Du kan anv\u00e4nda den f\u00f6r att ladda upp din MP3-fil och skapa en ljudspelare.<\/p>\n
Med MP3 uppladdad till Google Drive:<\/p>\n
      H\u00f6gerklicka<\/strong> filen och klicka F\u00e5 l\u00e4nk<\/strong>.  \u00c4ndra tillg\u00e4nglighetsbegr\u00e4nsningen till Alla som har l\u00e4nken<\/strong>.  Slutligen, klicka Kopiera l\u00e4nk<\/strong>.  <\/ol>\n
    Detta ger dig en URL som liknar denna:<\/p>\n
    https:\/\/drive.google.com\/file\/d\/123\/view?usp=sharing<\/pre>\n
    Byta ut view?usp=delning<\/strong> med f\u00f6rhandsvisning<\/strong>, s\u00e5h\u00e4r:<\/p>\n
    https:\/\/drive.google.com\/file\/d\/123\/preview<\/pre>\n
    Anv\u00e4nd sedan en