html5 ed audio gestito da javascript

giuseppeI · 29 Lug 2012

Con html5 gestire l'audio è relativamente semplice anche con la versione ie più recente. Tuttavia la cosa non è di facile realizzazione se l'audio deve essere controllato da javascript. Non riesco a far riconoscere, dei vari formati supportati da html5 (mp3, wav, ogg), che uno soltanto. il codice usato è quello qui riportato.

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
<script src="modernizr.custom.47689.js" type="text/javascript"></script>
</head>

<body>

<!--audio>
  <source src="suona.mp3" type="audio/ogg" id= "audio2"/>     **
                                                                                     in questo modo no funziona per niente
  <source src="suona.wav" type="audio/mp3" id = "audio1"/>
                                                                                     ***
  
</audio-->


    <!-- ** in queto modo viene riconosciuto soltanto il primo indirizzo ovvero "suona.mp3 id= audio2 **-->
<audio
        src="suona.mp3" type="audio/mp3" id="audio2" 
        src="suona.wav" type="audio/wav" id="audio1"/>
  Your browser does not support the audio tag.
</audio>



    <div>
  <input type="button" id="btnPlay" value="Play" onclick="PlayNow()" />
  <input type="button" id="btnPause" value="Pause" onclick="PauseNow()" />
  <input type="button" id="btnMute" value="Mute" onclick="MuteNow()" />
  <br />
  Volume :<input type="range" min="0" max="1" step="0.1" id="volume" 
onchange="ChangeVolume()">
        <br />
        Time lapsed:<input type="range" step="any" id="seekbar" 
onchange="ChangeTheTime()"><label id="lblTime">-:--:--</label>

 
 
   <script type="text/javascript">
        // ** Pensavo che con modernizr nel momento in cui mp3 non viene riconosciuto da firefox
        // ** document.getElementById avrebbe caricato var audio con canta.wav ovvero "audio1"
        // ** non è così
        if (Modernizr.audio) {
            var audio = document.getElementById("audio2");
        }
        else {
            var audio = document.getElementById("audio1");
        }
 
 
       // get the audio, volume and seekbar elements
     //  var audio = document.getElementById("audio1");
       var volumeRange = document.getElementById('volume');
       var seekbar = document.getElementById('seekbar');

il codice continua, ma quello che interessa è var audio = document.getElementById come fare a caricare "audio1" oppure "audio2" in base al browser utilizzato?

Ci sarà sicuramente una soluzione chiedo ancora una volta il vostro aiuto
grazie
giuseppe

criric · 31 Lug 2012

Ciao,
provo a spararne una

HTML:

<audio src="suona.wav" type="audio/wav" id="audio1"/></audio>
<audio src="suona.mp3" type="audio/mp3" id="audio2"/></audio>

<script>
    var ie=(/MSIE (\d+\.\d+);/.test(navigator.userAgent))?true:false;
    
   if(ie) {
       document.getElementById('audio2').play();
   }else{
       document.getElementById('audio1').play();
   }
</script>

per riconoscere il browser ho letto qui
non credo pero che il metodo play() sia supportato dalle versioni piu vecchie di explorer
ma è solo un idea

giuseppeI · 2012-08-01T11:17:04+0200

Ok, funziona

Come al solito sempre puntuale.
Non funzionando il metodo play con versioni precedenti la 9, una volta determinata la versione di IE come si potrebbe fare per implementare un player e farlo girare?
Grazie ancora
Giuseppe

Cerca

Cerca

html5 ed audio gestito da javascript

giuseppeI

Utente Attivo

criric

Super Moderatore

giuseppeI

Utente Attivo

Discussioni simili