audio on/off

audio on/off postato il 02/03/2009 12:20:27 nel forum programmazione, open source e hosting e modificato da vino_veritas il 02/03/2009 12:22:40

Salve, gentaglia! Ho un piccolo problema, e non riesco a risolverlo: voglio inserire un semplicissimo comando di on/off per l'audio su un sito. Ovvero, al momento dell'apertura della pagina, cliccando su "play" parte un mp3, cliccando su "stop" ovviamente l'esecuzione dell'mp3 si ferma.

Fermo restando che NON voglio usare flash, e quindi non saranno gradite risposte del tipo "l'unica tua soluzione è flash", ma semplicemente Javascript, come potrei fare? Se imposto autoplay = true l'audio parte regolarmente sia su IE che su firefox(gli unici 2 per cui, per ora, voglio implementare 'sta roba), sono i pulsanti di stop e play che non funzionano affatto. Credo che l'errore sia nel nome di funzione che si deve utilizzare per far partire/stoppare un file utilizzando il plugin (o il controllo activeX nel caso di IE) di windows media player. Qualcuno mi sa aiutare?

Ho provato varie soluzioni, nessuna di esse ha funzionato; in particolare ho implementato senza successo varie versioni delle funzioni playMusic_onclick() e stopMusic_onclick();

function playMusic_onclick(){
document.getElementById('player').play();
}

function stopMusic_onclick(){
document.getElementById('player').stop();
}

oppure:

function playMusic_onclick(){
if(navigator.appName.indexOf("Microsoft Internet Explorer") == -1){
alert("usi firefox!");
document.getElementById('player').play(true);
} else {
alert("usi IE!");
document.getElementById('player').play();
}
}

function stopMusic_onclick(){
if(navigator.appName.indexOf("Microsoft Internet Explorer") == -1){
alert("usi firefox!");
document.getElementById('player').play(false);
} else {
alert("usi IE!");
document.getElementById('player').stop();
}
}

Ho provato anche a cambiare l'attributo src sostituendolo di volta in volta con uno inesistente nel caso si cliccasse "stop" e rimettendolo a posto nel caso si cliccasse "play", ma niet.

Ecco il codice nel body:

<form name = "form1" id = "form1">
<input type = "button" id = "playButton" value = "Play" language = Javascript onclick = "return playMusic_onclick()">
<input type = "button" id = "stopButton" value = "Stop" language = Javascript onclick = "return stopMusic_onclick()">
</form>

<object id = "player" CLASSID = "CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<param name = "src" value ="percorso_del_file">
<param name = "width" value = 0px>
<param name = "heigth" value = 0px>
<param name = "type" value = "audio/mpeg">
<param name = "autoStart" value = "false">
//NOTA: settando autoplay = true il file parte regolarmente sia in IE che in FF

<embed
autostart = "false"
id ="player"
pluginspage = "http://www.microsoft.com/Windows/MediaPlayer/"
width = "0" heigth="0"
type = "application/x-mplayer2"
src = "percorso_del_file">

<noembed>puff!
</noembed>

</object>

02/03/2009 15:14:20

Mhhh se facessi un reload mi toccherebbe ricaricare la pagina a meno di non usare i frame... e sinceramente non mi va di cambiare layout al sito :-(

Sono sicuro che la soluzione è molto più banale di quel che sembra, accidenti!

02/03/2009 22:05:10

Non è esattamente quello che chiedevi tu, ma ho visto questo articolo, che forse può fare al caso tuo:

http://javascript.html.it/articoli/leggi/2994/una-playlist-mp3-con-jquery-e-scriptaculous/1/ ↗

03/03/2009 16:00:14

Grazie a coloro che hanno risposto, ho trovato un'altra soluzione, ora sono all'università, ma quando tornerò a casuccia bella posterò il codice, funzionante sia su IE che su FF (il codice di razor funziona solo su IE, mi sa... firefox ancora non si è adeguato al tag <object>); in effetti bastava utilizzare un po'di DOM e di cervello :-)

04/03/2009 15:56:50 e modificato da vino_veritas il 04/03/2009 16:02:37

Ecco il codice funzionante su IE e FF; come tutti gli enigmi è piuttosto banale, una volta capito e scoperto:

JS:

function buildPlayer(source){
obj = document.getElementById('player');
obj.innerHTML = '<OBJECT id="wmp" CLASSID="clsid:22d6f312-b0f6-11d0-94ab-0080c74c7e95" type="application/x-oleobject" width="0" height="0"><param name="fileName" value="'+source+'"><param name="uimode" value="true"><param name="valuetype" value="object"><embed type="application/x-mplayer2" src="'+source+'" width="0" height="0"></embed></object>';
}
function stop(){
obj = document.getElementById('player');
obj.innerHTML = "";
}

HTML:

<div id = "player"></div>
<div id ="controller">

<a href = # onclick = "buildPlayer(url_file)">Audio: ON</a>
<a href = # onclick = "stop()">Audio: OFF</a>
</div>

una versione più raffinata potrebbe prevedere di settare l'html del player utilizzando esclusivamente funzioni DOM... quando avrò più tempo la implemento:-) grazie ancora a tutti!