Lage en p3-audio button ved hjelp av javascript

Fredchii · 27. november 2012

Har tenkt å lage en play button til en nettside, men har ingen anelse på hvordan jeg skal gjøre det. Har prøvd å søkt litt rundt, men jeg finner ikke noe som viser eksakt hva jeg skal gjøre. Tenker på en prikk lik play/pause-knapp som når man skal starte en P3-dokumentar, med fargehover og at det endrer bilde fra > til ❙❙.

(Eks http://p3.no/dokumentar/leteaksjonen/ )

Hadde vært flott om noen kunne gitt meg koden/scriptet for dette, eller hjulpet meg på vei i hvert fall! Takk

grapz · 27. november 2012

Hvis du tar en kikk på koden ved hjelp av Inspector i en nettleser vil du se hvordan de gjør det.

Basically:

HTML:

<ul class="mainplayer-controls">
 <a class="mainplayer-play"></a>
</ul>

CSS:


.mainplayer-controls {
 // Masse posisjonsgreier
}

.mainplayer-play {
background: url("images/sprite_player.png") 0 0 no-repeat // Sprite map
}

Javasscript som velger rett del av spriten på mouseover, mouseclick osv.

Fredchii · 27. november 2012

<head>

function playSound(soundfile) {

document.getElementById("dummy").innerHTML=

"<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";

}

</script>

</head>

<body>

imgs=Array("sprite.png","sprite1.png");

var x=0;

function change() {

document.getElementById("bob").src=imgs[++x];

if (x==1) {

x=-1;

}

if (!imgs[x+1]) {

x=-1;

}

</script>

</body>

Nå får jeg bilde til å endre fra > til ❙❙, samt at lyden starter, men hver gang jeg trykker så starter den jo selvsagt på nytt. Hvordan kan jeg legge inn en onclick="stopSound() i tillegg til at den skal starte hvor den stoppet når jeg trykker play igjen?

herdon · 5. desember 2012

Anbefaler å gå over til html5, da kan du bruke <audio> taggen (da kan du bruke disse funksjonene: http://www.w3schools.../ref_av_dom.asp).

En funksjon der er en funksjon som pauser mediaobjektet.

PS:En av de andre funksjonene er å sjekke om hvor mye du har spilt av (gitt i sekunder), den verdien kan du gi for å si til brukeren hvor mye som er spilt av, om du vil det.

Endret 5. desember 2012 av herdon

Logg inn

Lage en p3-audio button ved hjelp av javascript

Anbefalte innlegg

Fredchii

Lenke til kommentar

Videoannonse

grapz

Lenke til kommentar

Fredchii

Lenke til kommentar

herdon

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer