HTML5 Il tag audio su Safari ha un ritardo

Sto cercando di realizzare un semplice comportamento simile a un doodle, in cui un suono mp3/ogg suona al clic, utilizzando il tag html. Dovrebbe funzionare sotto Firefox, Safari e Safari. L'iPad è veramente desiderabile.HTML5 Il tag audio su Safari ha un ritardo

Ho provato molti approcci e sono giunti fino a questo:

HTML

<span id="play-blue-note" class="play blue" ></span> 
    <span id="play-green-note" class="play green" ></span> 


    <audio id="blue-note" style="display:none" controls preload="auto" autobuffer> 
     <source src="blue.mp3" /> 
     <source src="blue.ogg" /> 
     <!-- now include flash fall back --> 
    </audio> 

    <audio id="green-note" style="display:none" controls preload="auto" autobuffer> 
     <source src="green.mp3" /> 
     <source src="green.ogg" /> 
    </audio>

function addSource(elem, path) { 
    $('<source>').attr('src', path).appendTo(elem); 
} 

$(document).ready(function() { 


    $('body').delegate('.play', 'click touchstart', function() { 
     var clicked = $(this).attr('id').split('-')[1]; 

     $('#' + clicked + '-note').get(0).play(); 



    }); 

});

Si può effettivamente vedere l'intera demo ign .com.uy/loog/

Sembra funzionare molto bene con Firefox ma Safari sembra avere un ritardo ogni volta che si fa clic, anche quando si fa clic diverse volte e il file audio è stato caricato. Su Safari su iPad si comporta in modo quasi imprevedibile.

Inoltre, le prestazioni di Safari sembrano migliorare quando eseguo il test localmente, suppongo che Safari stia scaricando il file ogni volta. È possibile? Come posso evitare questo? Grazie!

fonte

2012-03-21 Nacho

Ehi, qualche input sul problema di Safari? : S – Nacho

Le risposte correnti sono corrette e, in base alla loro disposizione, interamente in linea con [questa risposta precedente] (http://stackoverflow.com/a/7972609/517815) su un thread simile. La soluzione più efficace, come citato dall'autore e in [questa risposta in questo thread] (http: // StackOverflow.it/a/9960247/517815), è in effetti quello di distruggere tutti i tuoi comportamenti in un singolo file e chiamarli in frame diversi. È un sacco di lavoro extra, ma questo è ciò che accade quando Apple prende una decisione di progettazione con la quale tutti gli altri sono obbligati a conformarsi. (Fammi sapere se preferisci questa risposta.) – MrGomez

@ign sei riuscito a riprodurre più audio contemporaneamente su Safari desktop? Sfortunatamente ho riscontrato un ritardo con il desktop Safari. FF e Chrome funzionano bene. – trainoasis

Ho appena risposto a un'altra domanda iOS/<audio> pochi minuti fa. Sembra applicarsi anche qui:

Il precarico di <audio> e <video> su dispositivi iOS è disabilitato per risparmiare larghezza di banda.

In Safari su iOS (per tutti i dispositivi, compresi iPad), dove l'utente può essere su una rete cellulare ed essere applicati per unità di dati, precarico e riproduzione automatica sono disabilitati. Nessun dato viene caricato fino all'avvio dell'utente.

Fonte

: Safari Developer Library

fonte

2012-03-21 19:24:47 j08691

Grazie. Quindi, immagino che non ci sia modo di ottenere un feedback quasi in tempo reale su iPad, giusto? Qualche informazione su Safari? – Nacho

Il problema con Safari è che si mette una richiesta ogni volta per il file audio in riproduzione. Puoi provare a creare un manifest della cache HTML5. Purtroppo la mia esperienza è stata che puoi aggiungere alla cache solo un file audio alla volta. Una soluzione alternativa potrebbe essere quella di unire sequenzialmente tutti i file audio in un singolo file audio e iniziare a suonare in una posizione specifica a seconda del suono necessario. È possibile creare un intervallo per tracciare la posizione di riproduzione corrente e metterla in pausa una volta raggiunta una determinata marca temporale.

Per saperne di più sulla creazione di una cache HTML5 manifesta qui:

http://www.html5rocks.com/en/tutorials/appcache/beginner/

http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html

Speranza che aiuta!

fonte

2012-03-31 22:28:02 Reinaldo

Grazie per l'intuizione. Tuttavia sembra troppo complicato per un compito semplice che sto cercando di implementare. – Nacho

Non penso che tu abbia ragione riguardo alla richiesta ogni volta, ma penso che potresti fare un buon punto mettendo tutti gli effetti sonori in un singolo file e giocando a offset in contesti diversi, come descritto nella sezione Specifica intervallo di riproduzione a https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video. Mi chiedo quanto bene funzionerebbe con più elementi

Ciò significa che con i suoni veloci ripetuti, come il tiro del giocatore, l'impatto dei proiettili, ecc., Le ripetizioni spesso non vengono riprodotte. Un'altra soluzione alternativa potrebbe essere quella di avere diversi elementi

Apple ha deciso (per risparmiare denaro su celluar) di non precaricare gli elementi HTML <audio> e <video>.

Da the Safari Developer Library:

In Safari su iOS (per tutti i dispositivi, tra cui iPad), dove l'utente può essere su una rete cellulare e l'addebito per unità di dati, precarico e autoplay sono disabilitati. Nessun dato viene caricato fino all'avvio dell'utente. Questo significa che il JavaScript play() e load() metodi sono anche inattivi finché l'utente avvia la riproduzione, a meno che il metodo play() o load() è innescato dall'azione dell'utente. In altre parole, un pulsante Riproduci avviato dall'utente non funziona, ma un evento onLoad = "play()" no.

questo gioca il filmato:<input type="button" value="Play" onClick="document.myMovie.play()">

Questo non fa nulla su iOS:<body onLoad="document.myMovie.play()">

Non credo che è possibile aggirare questa restrizione, ma si potrebbe essere in grado a.

Ricorda: Google è il tuo migliore amico.

Aggiornamento: Dopo alcuni esperimenti, ho trovato un modo per giocare la <audio> con JavaScript:

var vid = document.createElement("iframe"); 
vid.setAttribute('src', "http://yoursite.com/yourvideooraudio.mp4"); // replace with actual source 
vid.setAttribute('width', '1px'); 
vid.setAttribute('height', '1px'); 
vid.setAttribute('scrolling', 'no'); 
vid.style.border = "0px"; 
document.body.appendChild(vid);

Nota: Ho provato solo con <audio>.

Aggiornamento 2:jsFiddle here. Sembra funzionare.

fonte

2012-04-02 20:00:12

La domanda non è come riprodurre l'audio, è perché c'è un ritardo. – j08691

@ j08691 Ho detto che –

La tua risposta è solo un rigurgito di ciò che ho già postato e un frammento di come riprodurre un file audio. Mi sto sfuggendo qualcosa di nuovo o diverso che stai contribuendo a rispondere alla domanda? – j08691

i file audio vengono caricati una volta quindi memorizzate nella cache .. suonare ripetutamente i suoni, anche dopo il refresh della pagina, non ha causato ulteriori richieste HTTP in Safari ..

Ho appena dato un'occhiata a uno dei tuoi suoni in un editor audio - c'era una piccola quantità di silenzio all'inizio del file .. questo si manifesterà come latenza ..

è l'Web Audio API un'opzione valida per voi?

fonte

2012-04-02 21:49:57 Lloyd

Grazie, non penso che il ritardo sia causato dal silenzio in il file, però. Controllerò l'API Web Audio. – Nacho

Sto avendo lo stesso problema. Ciò che è strano è che sto pre-caricando il file. Ma con il WiFi funziona bene, ma sui dati del telefono, c'è un lungo ritardo prima di iniziare. Ho pensato che avesse qualcosa a che fare con la velocità di caricamento, ma non ho iniziato a riprodurre la mia scena finché non sono state caricate tutte le immagini e il file audio. Qualsiasi suggerimento sarebbe molto apprezzato. (So che questa non è una risposta, ma ho pensato che fosse meglio fare un post su due).

fonte

2013-11-04 04:23:43

HTML5 Il tag audio su Safari ha un ritardo

risposta

Problemi correlati