html5 ed audio gestito da javascript

giuseppeI

Utente Attivo
25 Giu 2012
41
0
0
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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

Utente Attivo
25 Giu 2012
41
0
0
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
 
Discussioni simili
Autore Titolo Forum Risposte Data
D Problema con <audio> di HTML5 HTML e CSS 0
D pattern html5 non va con asterisco HTML e CSS 6
B Vendo Temi per Wordpress e template html5 Altri Annunci 0
C Html5 game HTML e CSS 1
matteoraggi [PHP] Trasformare una animazione html5 in un file video PHP 0
A [Javascript] problemi con javascrip e posizione GPS html5 Javascript 6
C Aggiornare App Html5 HTML e CSS 2
P [Javascript] [html5] operazioni matematiche come output di un form Javascript 7
P Implementare gioco html5 in pagina web HTML e CSS 3
xone [Offro] Realizzazione template html5 css3 creati da zero Offerte e Richieste di Lavoro e/o Collaborazione 0
G Dreamweaver e html5 Windows e Software 9
E Formato data datepicker HTML5 HTML e CSS 5
R Slideshow di immagini in HTML5 HTML e CSS 1
S pulsanti sonori in html5 HTML e CSS 3
T modificare un template html5 HTML e CSS 6
P html5 e css per ie10 e 11 HTML e CSS 6
N Passaggio da xhtml strict ad HTML5, problemi di charset!! HTML e CSS 1
L Funzione per API HTML5 Javascript 0
M Validazione documenti HTML5 HTML e CSS 0
A Modificare un template html5 Webdesign e Grafica 1
R Consiglio Snippet HTML5 Base HTML e CSS 2
C Attributi Tag <html> in HTML5 HTML e CSS 2
L [HTML5] Problema con Google Chrome, non so che sia. Javascript 3
glm2006ITALY Editor HTML5 HTML e CSS 6
I <section> e <article> in HTML5 HTML e CSS 1
M HTML5 datalist evento onchange HTML e CSS 1
M Controls volume in HTML5 HTML e CSS 0
J [RISOLTO] Struttura pagina con HTML5 e CSS HTML e CSS 7
S convertire html5/jquery app in apk per android jQuery 0
L [RISOLTO]inserire funzione in un oggetto (HTML5+canvas) Javascript 2
M embedare streaming in HTML5 compatibili con Android HTML e CSS 1
F Blog e Forum HTML5 / Tekhy Presenta il tuo Sito 22
A problema url html5 video HTML e CSS 1
A Webcam HTML5 HTML e CSS 1
P Bug IE 7/8 slideshow inserito in pagina html5 Parallax HTML e CSS 4
P Bug IE 7 slideshow inserito in pagina html5 Parallax Javascript 1
J html5 e standard HTML e CSS 2
P attuale compatibilità HTML5 con i principali browser HTML e CSS 6
Frank10 Problema w3c warning HTML5 -.-" HTML e CSS 5
YellowMan HTML5 off-line web application HTML e CSS 1
Frank10 Problema w3c e doctype html5 HTML e CSS 2
K [consigli] CMS in HTML5 con Responsive Web Design e semantica schema.org Content Management System (CMS) 3
novello88 Problema convalida W3C pagina HTML5 HTML e CSS 8
L HTML5 Boilerplate HTML e CSS 3
YellowMan HTML5 WebSocket: mi fate un esempio di come funziona? HTML e CSS 1
YellowMan Video HTML5: in locale funziona, on-line no! HTML e CSS 1
novello88 Come faccio a sapere se il mio browser supporta HTML5? HTML e CSS 2
voldemort HTML5 e CSS3: ancora troppo presto? HTML e CSS 3
PenguinLover HTML5 Geolocalizzazione - come funziona? HTML e CSS 8
maxbossi Guida ad HTML5 in italiano HTML e CSS 0

Discussioni simili