Controllare TAG Audio in HTML5

[Zenida]

Salve a tutti raga sto letteralmente uscendo pazzo per svolgere una semplice funzione.

Nella home del mio sito c'è una musica di sottofondo che ovviamente vorrei rendere disabilitabile tramite il click su un'immagine.

questo è il codice html che richiama la funzione javascript (almeno credo )

<div class="toggle_sound">
    [img]themes/steampunk/imgs/home_page/speaker.png[/img]
</div>

mentre questo è il codice javascript che si trova ad inizio pagina prima della chiamata della funzione

<script type = 'text/javascript'>
    var mediaElement = document.getElementsById("background");
    var status = true;         <---Ovviamente questa cosa credo venga eseguita una
                                 sola volta al caricamento della pagina, altrimenti sono fregato

    function toggle_audio()
    {
        if (status)
        {
            status = false;
            mediaElement.pause();
        }
        else
        {
            status = true;
            mediaElement.play();
        }
    }
</script>

Mentre questo è il tag audio che utilizzo in fondo alla pagina

<audio id="background" autoplay preload loop>
    <source src="welcome.mp3">
    <source src="welcome.ogg">
</audio>

all'inizio ero riuscito a far funzionare lo stop ora non riesco a far funzionare neanche quello più non capisco cosa devo fare

[Zenida]

Sto provando davvero in tutti i modi possibili.... la cosa che non capisco è perchè all'inizio un qualcosa sembrava funzionare e ora invece sembra che il javascript non venga proprio eseguito all'interno del mio HTML


ho persino messo un

alert("ciao");

all'interno dello script ma nulla non compare nulla

perchè il mio codice Javascript non viene eseguito?

[Zenida]

ho risolto ragazzi

a parte qualche piccolo errorino di sintassi come doppio apice al posto di apice semplice che in javascript a quanto pare fanno la differenza...


Questa cosa qui non funziona:

var elemento = document.getElementById('backround');
elemento.play();

bisogna fare direttamente così:

document.getElementById('background').play();

[Zenida]

adesso però ho un altro problema

Quando faccio il toggle tra uno stato e l'altro dell'audio, vorrei anche poter cambiare l'icona per indicare lo stato dell'audio:
ON
OFF

ho provato diverse soluzioni, ma partiamo da questa e ditemi cosa bisogna fare:

echo ("<a href=\"#\" onclick=\"document.speaker.src='themes/steampunk/imgs/home_page/speakerOFF.png'; toggle_audio()\" title=\"Abilita/Disabilita Audio\"><img src=\"themes/steampunk/imgs/home_page/speakerON.png\" name=\"speaker\"></a>"); 

[Zenida]

up

[Zenida]

D'accordo sono riuscito nuovamente a risolvermi da solo anche questo problema xD.... posto cmq perchè chiunque cercasse le stesse mie informazioni forse riuscirà a risolvere anche il proprio problema....


per fare un toggle anche delle immagine che viene cliccata oltre che dell'audio da ON a OFF si può usare il seguente codice:


Questa parte riguarda un codice PHP che genera un link con un'immagine di default che all'evento onclick richiama una funzione chiamata toggle()

echo ("<a href=\"#\" onclick=\"toggle()\" title=\"Abilita/Disabilita Audio\"><img src=\"themes/steampunk/imgs/home_page/speakerON.png\" id=\"toggle_image\"></a>"); 

Questo invece è il codice javascript che effettua il toggle dell'audio e dell'immagine

<script type="text/javascript">
    var status = 0;    //NB: questa variabile viene inizializzata una volta sola
                       //al caricamento della pagina, perchè è all'esterno della funzione.

    function toggle()
    {
        if (status == 0)
        {
            status = 1;
            document.getElementById('background').pause();
            document.getElementById('toggle_image').src = "themes/steampunk/imgs/home_page/speakerOFF.png";
        }
        else
        {
            status = 0;
            document.getElementById('background').play();
            document.getElementById('toggle_image').src = "themes/steampunk/imgs/home_page/speakerON.png";
        }
    }
</script>