web-dev-qa-db-fra.com

HTML 5 Audio Tag Plusieurs fichiers

J'essaie d'avoir deux fichiers dans une balise audio HTML 5 qui sont lus l'un après l'autre. Le code que j'ai jusqu'ici est:

<audio id="ListenLive" controls autoplay>
<source src="advert.mp3" type="audio/mpeg">
<source src="stream.mp3" type="audio/mpeg">

</audio>

Le problème que je me pose pour le moment est que seul le premier fichier est lu et se termine, c'est comme s'il n'y avait pas de second fichier. Dès que la première chanson se termine, cela ne fait rien d'autre.

Est-il possible d’obtenir la lecture automatique de la deuxième piste à la fin de la première? J'ai besoin que ce soit en HTML, comme c'est le cas pour un site mobile, donc du code peut ne pas fonctionner sur certains appareils

html5html5-audio
12
Alex

En javascript, vous pouvez le faire comme ceci (ceci est juste pour vous aider à démarrer): 

audio = new Audio("start url");

  audio.addEventListener('ended',function(){
        audio.src = "new url";
        audio.pause();
        audio.load();
        audio.play();
    });

si vous le souhaitez, vous pouvez également utiliser le même lecteur (jQuery):

var audio = $("#player");
10
Kimtho6

L'ajout de plusieurs sources à baliser ne fonctionne pas de cette façon. Vous pouvez l’utiliser pour fournir la source dans plusieurs formats (certains navigateurs ne prennent pas en charge le format mp3 - i.e. Firefox ne prend pas en charge le format mp3 et vous devez fournir le fichier ogg).

Échantillon:

<audio>
   <source src="" id="oggSource" type="audio/ogg" />
   <source src="" id="mp3Source" type="audio/mpeg" />
   Your browser does not support the audio element.
</audio>

Votre cas est différent. Vous essayez de faire une playlist. Vous pouvez créer une playlist par vous-même:

http://www.lastrose.com/html5-audio-video-playlist/

http://jonhall.info/how_to/create_a_playlist_for_html5_audio

OU utilisez simplement des plugins tiers comme:

http://www.jplayer.org/latest/demo-02-jPlayerPlaylist/

Utiliser jPlayer résoudrait aussi le problème de la compatibilité du navigateur. Par exemple, si vous ne fournissez que le format .mp3, il passera à la version flash lorsque l'utilisateur navigue avec Firefox.

15
Code.Town

Avec du javascript, vous pouvez faire un tour 

Voici un échantillon , un autre un

jQuery(function($) {
  var supportsAudio = !!document.createElement('audio').canPlayType;
  if(supportsAudio) {
    var index = 0,
    playing = false;
    mediaPath = 'http://jonhall.info/how_to/assets/media/audio/',
    extension = '',
    tracks = [
      {"track":1,"name":"Happy Birthday Variation: In the style of Beethoven","length":"00:55","file":"01_Happy_Birthday_Variation_In_The"},
      {"track":2,"name":"Wedding March Variation 1","length":"00:37","file":"02_Wedding_March_1"},
      {"track":3,"name":"Happy Birthday Variation: In the style of Tango","length":"01:05","file":"03_Happy_Birthday_Variation_In_The"},
      {"track":4,"name":"Wedding March Variation 2","length":"00:40","file":"04_Wedding_March_2"},
      {"track":5,"name":"Random Classical","length":"00:59","file":"05_AFI_com"}
    ],
    trackCount = tracks.length,
    npAction = $('#npAction'),
    npTitle = $('#npTitle'),
    audio = $('#audio1').bind('play', function() {
      playing = true;
      npAction.text('Now Playing:');
    }).bind('pause', function() {
      playing = false;
      npAction.text('Paused:');
    }).bind('ended', function() {
      npAction.text('Paused:');
      if((index + 1) < trackCount) {
        index++;
        loadTrack(index);
        audio.play();
      } else {
        audio.pause();
        index = 0;
        loadTrack(index);
      }
    }).get(0),
    btnPrev = $('#btnPrev').click(function() {
      if((index - 1) > -1) {
        index--;
        loadTrack(index);
        if(playing) {
          audio.play();
        }
      } else {
        audio.pause();
        index = 0;
        loadTrack(index);
      }
    }),
    btnNext = $('#btnNext').click(function() {
      if((index + 1) < trackCount) {
        index++;
        loadTrack(index);
        if(playing) {
          audio.play();
        }
      } else {
        audio.pause();
        index = 0;
        loadTrack(index);
      }
    }),
    li = $('#plUL li').click(function() {
      var id = parseInt($(this).index());
      if(id !== index) {
        playTrack(id);
      }
    }),
    loadTrack = function(id) {
      $('.plSel').removeClass('plSel');
      $('#plUL li:eq(' + id + ')').addClass('plSel');
      npTitle.text(tracks[id].name);
      index = id;
      audio.src = mediaPath + tracks[id].file + extension;
    },
    playTrack = function(id) {
      loadTrack(id);
      audio.play();
    };

    extension = audio.canPlayType('audio/mpeg') ? '.mp3' : audio.canPlayType('audio/ogg') ? '.ogg' : '';

    loadTrack(index);
  }

  $('#useLegend').click(function(e) {
    e.preventDefault();
    $('#use').slideToggle(300, function() {
      $('#useSpanSpan').text(($('#use').css('display') == 'none' ? 'show' : 'hide'));
    });
  });
});

<link href="http://jonhall.info/examples/html5_audio_playlist_example.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="content" role="main">
  <div id="cwrap">
    <div id="nowPlay" class="is-audio">
      <h3 id="npAction">Paused:</h3>
      <div id="npTitle"></div>
    </div>
    <div id="audiowrap">
      <div id="audio0">
        <audio id="audio1" controls="controls">
          Your browser does not support the HTML5 Audio Tag.
        </audio>
      </div>
      <noscript>Your browser does not support JavaScript or JavaScript has been disabled. You will need to enable JavaScript for this page.</noscript>
      <div id="extraControls" class="is-audio">
        <button id="btnPrev" class="ctrlbtn">|&lt;&lt; Prev Track</button> <button id="btnNext" class="ctrlbtn">Next Track &gt;&gt;|</button>
      </div>
    </div>
    <div id="plwrap" class="is-audio">
      <div class="plHead">
        <div class="plHeadNum">#</div>
        <div class="plHeadTitle">Title</div>
        <div class="plHeadLength">Length</div>
      </div>
      <div class="clear"></div>
      <ul id="plUL">
        <li class="plItem">
          <div class="plNum">1</div>
          <div class="plTitle">Happy Birthday Variation: In the style of Beethoven</div>
          <div class="plLength">0:55</div>
        </li>
        <li class="plItem">
          <div class="plNum">2</div>
          <div class="plTitle">Wedding March Variation 1</div>
          <div class="plLength">0:37</div>
        </li>
        <li class="plItem">
          <div class="plNum">3</div>
          <div class="plTitle">Happy Birthday Variation: In the style of Tango</div>
          <div class="plLength">1:05</div>
        </li>
        <li class="plItem">
          <div class="plNum">4</div>
          <div class="plTitle">Wedding March Variation 2</div>
          <div class="plLength">0:40</div>
        </li>
        <li class="plItem">
          <div class="plNum">5</div>
          <div class="plTitle">Random Classical</div>
          <div class="plLength">0:59</div>
        </li>
      </ul>
    </div>
  </div>
</div>
1
Thirumalai murugan

Merci à jonhall.info et à Thirumalai murugan pour leur exemple.

jQuery(function($) {
  var supportsAudio = !!document.createElement('audio').canPlayType;
  if(supportsAudio) {
    var index = 0,
    playing = false,
    tracks = [
      {"track":1,"name":"SoundHelix Song 1","length":"06:12","file":"https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"},
      {"track":2,"name":"SoundHelix Song 3","length":"05:44","file":"https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3"},
      {"track":3,"name":"SoundHelix Song 8","length":"05:25","file":"https://www.soundhelix.com/examples/mp3/SoundHelix-Song-8.mp3"}
    ],
    trackCount = tracks.length,
    npAction = $('#npAction'),
    npTitle = $('#npTitle'),
    audio = $('#audio1').bind('play', function() {
      playing = true;
      npAction.text('Now Playing:');
    }).bind('pause', function() {
      playing = false;
      npAction.text('Paused:');
    }).bind('ended', function() {
      npAction.text('Paused:');
      if((index + 1) < trackCount) {
        index++;
        loadTrack(index);
        audio.play();
      } else {
        audio.pause();
        index = 0;
        loadTrack(index);
      }
    }).get(0),
    btnPrev = $('#btnPrev').click(function() {
      if((index - 1) > -1) {
        index--;
        loadTrack(index);
        if(playing) {
          audio.play();
        }
      } else {
        audio.pause();
        index = 0;
        loadTrack(index);
      }
    }),
    btnNext = $('#btnNext').click(function() {
      if((index + 1) < trackCount) {
        index++;
        loadTrack(index);
        if(playing) {
          audio.play();
        }
      } else {
        audio.pause();
        index = 0;
        loadTrack(index);
      }
    }),
    loadTrack = function(id) {
      $('.plSel').removeClass('plSel');
      $('#plTrack>div:eq(' + id + ')').addClass('plSel');
      npTitle.text(tracks[id].name);
      index = id;
      audio.src = tracks[id].file;
    },
    displayTrack = function(){
      var parent = $('#plTrack');
      $.each(tracks, function(i, track) {
        $('<div></div>').addClass('row')
        .append($('<div></div>').addClass('col-sm').text(track.track))
        .append($('<div></div>').addClass('col-sm').text(track.name))
        .append($('<div></div>').addClass('col-sm').text(track.length))
        .appendTo(parent);
      });
    },
    playTrack = function(id) {
      loadTrack(id);
      audio.play();
    };

    displayTrack();
    loadTrack(index);
  }
});
#plTrack .plSel {
  font-weight: bold;
}
.header {
  color: #999;
  border-bottom: 1px solid #999;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div>
  <div>
    <div class="row">
      <div class="col-6"><h3 id="npAction">Paused:</h3></div>
      <div class="col-6" id="npTitle"></div>
    </div>
    <div class="row">
      <div class="col-6">
        <audio id="audio1" controls="controls">
          Your browser does not support the HTML5 Audio Tag.
        </audio>
      </div>
      <noscript>Your browser does not support JavaScript or JavaScript has been disabled. You will need to enable JavaScript for this page.</noscript>
      <div class="col-6">
        <button id="btnPrev" class="ctrlbtn">|&lt;&lt; Prev Track</button> <button id="btnNext" class="ctrlbtn">Next Track &gt;&gt;|</button>
      </div>
    </div>
    <div>
      <div class="row header">
        <div class="col-sm">#</div>
        <div class="col-sm">Title</div>
        <div class="col-sm">Length</div>
      </div>
      <div id="plTrack"></div>
    </div>
  </div>
</div>

0
Camille