Ljud på sidan

Inledning

Med taggen <embed> kan man infoga ljud (och annan multimedia) på sin hemsida. De vanligaste filtyperna för ljud är wav, mid och mp3.

Enligt standard ska man egentligen använda taggen <object> för att infoga multimedia. Men än så länge fungerar det väldigt olika i olika webläsare. Därför är den inte så effektiv i det här sammanhanget.
Läs mer om hur man använder <object> på W3schools.

Taggen <embed> tillhör alltså inte HTML-standarden och den presenteras också lite olika av olika webläsare. Nedanstående koder fungerar i Internet Explorer, Netscape, Mozilla och Opera (lite knackigt här och var - men dock).

Hur funkar <embed> i olika webläsare?

Netscape & Mozilla

Netscape och Mozilla måste ha "QuickTime Player" och ev. även "Itunes" installerad för att kunna hantera ljud-filer på ett bra sätt.
Du kan ladda ner båda genom att klicka här: www.apple.com

Internet Explorer

De som surfar med senare versioner av Internet Explorer och har laddat hem de senaste säkerhetsuppdateringarna kommer att bli tillfrågade om de vill köra ActiveX-kontroller när de kommer till en sida med taggen <embed> - om de inte stängt av den funktionen, förstås. Det kan vara lite irriterande... Har man infogat flera ljudfiler på sidan blir det MYCKET irriterande!

Opera

De besökare som har Opera som webläsare kommer att ha problem med att visa synliga kontroller om de inte installerat de tilläggs-program som behövs för att hantera ljudfiler. Dessutom kommer de filer som egentligen är tänkta att startas via en kontroll att spelas en gång direkt när man öppnar sidan. Det kan vara lite irriterande... Har man infogat flera ljudfiler på sidan blir det MYCKET irriterande!

Summa summarum...

Även fast taggen <embed> inte tillhör standarden är det den metod som fungerar bäst för tillfället om man vill infoga ljud med en synlig kontroll. De vanligaste webläsarna hanterar den på någorlunda samma sätt. Och i väntan på att webläsarna ska anpassa sig till <object> får det väl duga!

Det som fungerar bäst är att infoga en länk till ljudet - i stället för en kontroll på sidan. Det fungerar på samma sätt i alla webläsare - dock med lite variation beroende på vilket program filtyperna är assosierade till.
Mer om det längre ner!

Vill du ha bakgrundsljud är det bästa att använda JavaScript. Det fungerar utan några som helst problem i alla de vanliga webläsarna.
Mer om det längre ner!

 Till Toppen 

Ljud med synlig kontroll

När man infogar ljud på sidan som visar en kontroll har besökaren möjlighet att själv bestämma om musiken är värd att lyssna till eller inte. Kontrollerna för detta ser lite olika ut beroende på vilket program besökaren har assosierat till filtypen.

Så här ser t.ex. en kontroll ut om filtypen är assosierad till Windows Media Player:

Eller om du har en äldre version så här:

Och så här om den är assosierad till QuickTime Player:

OBS!
Utseendet på kontrollerna nedan kommer att styras av vad du har för program installerat i din dator.

WAV
Ett infogat ljud av filtypen wav med kontroll ser ut som nedan.
Klicka på "play" för att höra filen:

MID
Ett infogat ljud av filtypen mid med kontroll ser ut som nedan.
Klicka på "play" för att höra filen:

MP3
Ett infogat ljud av filtypen mp3 med kontroll ser ut som nedan.
Klicka på "play" för att höra Carolas skönsång:

Saknar du någon kontroll ovan?

Antagligen måste du installera någon "Plug-in" för att få det att fungera (t.ex. Netscape, Mozilla, Opera). Surfar du med Internt Explorer kanske du klickade "Nej" när du blev tillfrågad om att köra ActiveX-kontroller?

Infoga synlig kontroll

Taggen <embed> infogas i HTML-koden där du vill visa kontrollen:

Attribut - fler inställningar

Volym

Med attributet: "volume" kan du reglera volymen på den uppspelade filen. Ange värdet i procent. T.ex. volume="70%". Om du inte använder attributet volume kommer volymen helt att bestämmas av inställningarna på din besökares dator. Så tänk på att volymen på din egen dator kanske inte alls motsvarar hur det låter när besökarna surfar in på din sida...

Repetition

Med attributet: "loop" kan du ange hur filen ska repeteras. Om du inte anger någonting spelas filen en gång. Genom att ange: loop="true" kommer filen att spelas gång på gång.

Höjd och Bredd på kontrollen

Med width="100" height="45" anger du att du vill att kontrollen ska ha dessa mått... MEN! Räkna med att detta kanske inte alltid fungerar eftersom funktionen varierar beroende på vilket program som är associerat till filen.

Justera Kontrollen

Med attributet "align" och "valign" kan du justera kontrollen på sidan på samma sätt som med bilder och text t.ex. align="right", align="center", valign="top" osv. Men i vanlig ordning fungerar det lite olika i olika webläsare... Vill du vara på säkra sidan ska du använda taggen <div> för att justera kontrollen. Som i exemplet nedan.

Exempel

Klicka här för att se / höra hur det blir!

 Till Toppen 

Länka till ljud

Om du inte vill bekymra dig om olikheterna mellan olika webläsare när man infogar ljud med synlig kontroll kan du i stället länka till din ljudfil. Antingen med en textlänk eller kanske med en bild?

Ljudfilen kommer att öppnas i den "mediaspelare" som besökaren har knuten till filtypen. Här följer några exempel. Glöm inte att skriva rätt sökväg till filen, bara!

Exempel 1

Skulle fungera så här:

Djungelvråål!    Klicka på Länken!

Exempel 2

Skulle fungera så här:

   Klicka på Bilden!

Exempel 3

Skulle fungera så här:

tarzan.wav    Klicka på Bilden eller Textlänken!

 Till Toppen 

Bakgrundsljud - utan synlig kontroll

Om du bestämt dig för att ha lite trevlig bakgrundsmusik för att pigga upp dina besökare kanske du vill att den ska spelas utan att man ser någon kontroll. Det vanligaste är att använda taggen <embed>. Men...

Internet Explorer har skapat en egen tagg för att infoga bakgrundsljud: <bgsound> - som också fungerar i Opera. Det gör förstås att <embed> inte fungerar helt utan macklemang i Opera och IE...

Då tänker du kanske att man kan infoga både <bgsound>och <embed> för att få det att fungera finemang i alla webläsare? Nix! Det går inte! Eftersom IE och Opera då kommer att läsa BÅDA - och spela upp dubbla ljud...

JavaScript

Eftersom det blir problem att infoga bakgrundsljud som fungerar på samma sätt i alla webläsare finns det fiffiga individer som skriver JavaScript man kan använda för att komma runt problemen!

Ett bra script hittar du om under rubriken: JAVASCRIPT / Fantasifulla finesser.

Men det kan vara bra att läsa informationen om hur man infogar bakgrundsljud med <embed> och <bgsound> eftersom det kan hjälpa dig att anpassa scriptet så att det fungerar som du vill ha det!

Summa summarum...

Vill du ha bakgrundsljud är det bästa att använda JavaScript. Det fungerar fint i alla de vanliga webläsarna.

Vill du inte använda JavaScript ska du välja antingen <embed> eller <bgsound>.

Använder du <bgsound> anpassas sidan för dem som surfar med Opera och Internet Explorer - de andra hör ingenting.

Med <embed> fungerar det i de flesta webläsare - men nyare Internet Explorer kan komma att visa en säkerhetsvarning och Opera kommer att spela filen EN gång oavsett om du vill att den ska upprepas.

Infoga bakgrundsljud med <embed>

När man infogar bakgrundsljud med <embed> är det vanligast att använda attributet "hidden" med värdet "true" för att dölja kontrollen. Men för att att det ska fungera i de flesta webläsare rekommenderar jag att du i stället använder: "width" och "height" och drar ner storleken till 0.

Taggen <embed> kan man här egentligen infoga var som helst mellan <body> och </body>, eftersom kontrollen ändå inte kommer att synas.

Men eftersom ljudfiler kan ta lite tid att laddas av webläsaren är det bäst att infoga koden precis före taggen </body>. På så sätt laddas själva sidan först och besökarna slipper sitta och trumma med fingrarna medan ljudet laddas. Eller tröttna och surfa vidare...

Exempel 1

Klicka här för att höra hur det blir!

Exempel 2

Klicka här för att höra hur det blir! (filen spelas endast en gång)

Infoga Bakgrundsljud med Bgsound

Det fungerar precis på samma sätt som när man infogar ljud med <embed> Men fungerar bara i Internet Explorer och Opera. Men eftersom det här är fråga om ett bakgrundsljud behöver man inte särskilt ange att ljudet ska spelas upp automatiskt.

loop         1 - infinite = 1 - oändligt antal gånger.
volume     0 = besökarens inställning / Negativa tal = sänkt volym

Exempel 1

Klicka här för att höra hur det blir - endast IE och Opera

Exempel 2

På den här sidan kan man läsa om svenska traditioner. Intressant! Men är musiken lika intressant? Klicka här! - endast IE och Opera!

 Till Toppen 

Avslutningsvis...

Fler attribut?

Nu tänker du kanske: Hallå där! Jag VET att det finns en massa andra attribut man kan använda när man infogar ljud som inte du skriver ett smack om!

Det stämmer. Anledningen är att det inte går att få det att fungera på samma sätt i ens två webläsare samtidigt... Det som fungerar i perfekt i Mozilla kanske resulterar i att det inte hörs nåt alls i Internet Explorer eller tvärtom. Koderna ovan fungerar fint i alla de vanligaste webläsarna!

No Embed

Taggen <noembed> är till för webläsare som inte hanterar taggen "embed". De kommer i stället att se det meddelande du skrivit mellan <noembed> och </noembed>

Så här kan man använda den:

Skulle se ut så här i en webläsare som inte stöder embed-taggen:

Din webläsare stöder inte funktionen EMBED, men du kan höra musiken genom att klicka här.