html5 - section - cómo jugar<audio> bloques uno por uno sin pops y clics?

section html5 ejemplos

Question

Tengo dos etiquetas como esta:

<audio id="1" src="lub0.mp4" />
<audio id="2" src="lub1.mp4" />

Quiero jugarlos uno por uno, es decir, .play () primero y cuando se lanza onend evento, voy a .play () el segundo. Lamentablemente, esto me da un sonido pop en el medio. ¿Hay alguna forma correcta de navegador cruzado de hacer esto sin hacer clic?

Los archivos en sí están bien, si los pego el uno al otro en ffmpeg, el sonido es perfecto.

Gracias.

Answer 1

Si te entendí correctamente ...

Lo único que puedo recomendar ahora es agregar preload="auto" (para reducir el tiempo de almacenamiento en búfer).
Ejemplo :

• HTML:

  <audio id="file1" src="http://www.freesound.org/data/previews/335/335253_3162775-lq.mp3" controls preload="auto"></audio>
  <br>
  <audio id="file2" src="http://www.freesound.org/data/previews/331/331122_4490625-lq.mp3" controls preload="auto"></audio>

• JS:

  var file1 = document.querySelector(''#file1'');
  var file2 = document.querySelector(''#file2'');
  
  file1.onended = function() {file2.play();}
  file2.onended = function() {file1.play();}
  
  file1.play();

Sin embargo, aunque esto parece funcionar cuando los MP3 son dos canciones no relacionadas, etc., cortar un sonido con ffmpeg en dos archivos separados y reproducirlos de esta forma mostrará una falla en el comienzo del segundo archivo. No obstante, en mi caso, volver a concatenarlos en un solo archivo no repara el problema (es decir, en mi caso, los fallos son una propiedad de los archivos de sonido en sí mismos, ya que aparecieron por corte inexacto de un solo archivo en dos partes, no el resultado del comportamiento del navegador: ¿puede proporcionar su archivo?).

Answer 2

Prueba lo siguiente.

var fileOne = document.getElementById(''1'');
fileOne.onended = function() {
    document.getElementById(''2'').play();
}

fileOne.play();

He formateado la etiqueta de audio de manera diferente, lo intenté de la manera en que lo tuve y falló. Así es como lo tengo

<audio id="1">
<source src="movie.mp4" type="video/mp4">
</audio >

<audio id="2">
  <source src="movie.mp4" type="video/mp4">
</audio >

Answer 3

Aquí hay un violín que puedes verificar. No es necesario que haga clic en ellos, están en una lista de reproducción y js eventlistener comprueba cuándo se termina por otro. cuando uno termina, se iniciará otro. Tenga en cuenta que no creé ese violín, pero lo usé como un ejemplo para mí también en mi proyecto.

http://jsfiddle.net/WsXX3/33/

HTML:

    <audio id="audio" preload="auto" tabindex="0" controls="" type="audio/mpeg">
    <source type="audio/mp3" src="http://www.archive.org/download/bolero_69/Bolero.mp3">
    Sorry, your browser does not support HTML5 audio.
</audio>
<ul id="playlist">
    <li class="active"><a href="http://www.archive.org/download/bolero_69/Bolero.mp3">Ravel Bolero</a></li>
    <li><a href="http://www.archive.org/download/MoonlightSonata_755/Beethoven-MoonlightSonata.mp3">Moonlight Sonata - Beethoven</a></li>
    <li><a href="http://www.archive.org/download/CanonInD_261/CanoninD.mp3">Canon in D Pachabel</a></li>
    <li><a href="http://www.archive.org/download/PatrikbkarlChamberSymph/PatrikbkarlChamberSymph_vbr_mp3.zip">patrikbkarl chamber symph</a></li>

</ul>

CSS:

#playlist,audio{background:#666;width:400px;padding:20px;}
.active a{color:#5DB0E6;text-decoration:none;}
li a{color:#eeeedd;background:#333;padding:5px;display:block;}
li a:hover{text-decoration:none;}

JS:

var audio;
var playlist;
var tracks;
var current;

init();
function init(){
    current = 0;
    audio = $(''audio'');
    playlist = $(''#playlist'');
    tracks = playlist.find(''li a'');
    len = tracks.length - 1;
    audio[0].volume = .10;
    audio[0].play();
    playlist.find(''a'').click(function(e){
        e.preventDefault();
        link = $(this);
        current = link.parent().index();
        run(link, audio[0]);
    });
    audio[0].addEventListener(''ended'',function(e){
        current++;
        if(current == len){
            current = 0;
            link = playlist.find(''a'')[0];
        }else{
            link = playlist.find(''a'')[current];    
        }
        run($(link),audio[0]);
    });
}
function run(link, player){
        player.src = link.attr(''href'');
        par = link.parent();
        par.addClass(''active'').siblings().removeClass(''active'');
        audio[0].load();
        audio[0].play();
}