30

AudioPlaylist

AudioPlayer  |  Wall

Une instance de AudioPlaylist gère une liste de pistes audio qui sont jouées par une instance de AudioPlayer.

Objective
  • Responder
    • View
      • AudioPlaylist
00:00:00

Cliquez sur le nom d'une piste pour la charger dans le lecteur.

Appuyez sur le bouton lecture pour démarrer la lecture de l'audio. Appuyez sur le bouton pause pour la mettre en pause. Déplacez le glisseur ou cliquez dans la barre de progression pour avancer ou reculer dans l'audio. Activez ou désactivez la lecture en boucle. NOTE : Le lecteur passe automatiquement à la piste suivante si la lecture en boucle est désactivée.

Dans la console du navigateur, chargez une piste dans le lecteur :

audioplaylist.currentTrack=4

Ajoutez un temps d'attente en millisecondes entre les pistes :

audioplaylist.gap=2000

Désactivez la lecture en boucle :

audioplayer.loop=false

Démarrez le lecteur :

audioplayer.play()
AudioPlaylist.js
  1. function AudioPlaylist(player, tracks) {
  2.     View.call(this);
  3.  
  4.     player.addListener(this);
  5.  
  6.     this._player = player;
  7.  
  8.     this._tracks = tracks;
  9.  
  10.     this._currentTrack = 1;
  11.  
  12.     this._gap = 0;
  13.  
  14.     this._timer = null;
  15. }
  16.  
  17. AudioPlaylist.prototype = Object.create(View.prototype);
  18.  
  19. Object.defineProperty(AudioPlaylist.prototype, 'constructor', { value: AudioPlaylist, enumerable: false, writable: true });

La classe AudioPlaylist hérite de la classe View. player est une instance de AudioPlayer. tracks est un tableau qui liste les pistes audio gérées par l'instance. Chaque piste est décrite par un objet avec un champ title, une chaîne de caractères, le titre de la piste, et un champ url, une chaîne de caractères, une URL qui pointe vers le fichier audio.

  1. Object.defineProperty(AudioPlaylist.prototype, 'currentTrack', {
  2.     get:    function() {
  3.         return this._currentTrack;
  4.     },
  5.     set:    function(n) {
  6.         if (!Number.isInteger(n))
  7.             throw new TypeError();
  8.  
  9.         if (n < 1 || n > this._tracks.length)
  10.             n = this._tracks.length;
  11.  
  12.         if (this._tracks[this._currentTrack-1].widget)
  13.             this._tracks[this._currentTrack-1].widget.classList.remove('selected');
  14.  
  15.         this._currentTrack = n;
  16.  
  17.         if (this._tracks[this._currentTrack-1].widget)
  18.             this._tracks[this._currentTrack-1].widget.classList.add('selected');
  19.  
  20.         this._player.src = this._tracks[n-1].url;
  21.     }
  22. });

currentTrack est un accesseur qui retourne ou change la piste chargée dans le lecteur audio géré par this. currentTrack retourne ou accepte en argument un numéro de piste. Un numéro de piste commence à 1. Si le numéro de piste en argument est inférieur à 1 ou supérieur au nombre de piste gérée par this, currentTrack charge la dernière piste.

  1. Object.defineProperty(AudioPlaylist.prototype, 'gap', {
  2.     get:    function() {
  3.         return this._gap;
  4.     },
  5.     set:    function(ms) {
  6.         if (!Number.isInteger(ms))
  7.             throw new TypeError();
  8.  
  9.         if (ms < 0)
  10.             throw new RangeError();
  11.  
  12.         this._gap = ms;
  13.     }
  14. });
  1. AudioPlaylist.prototype.audioEnded = function(sender) {
  2.     if (this._currentTrack == this._tracks.length)
  3.         this.currentTrack = 1;
  4.     else {
  5.         this.nextTrack();
  6.  
  7.         if (this._gap > 0)
  8.             this._timer = setTimeout(() => { this._timer = null; this._player.play(); }, this._gap);
  9.         else
  10.             this._player.play();
  11.     }
  12. };
  1. AudioPlaylist.prototype.audioPlayed = function(sender) {
  2.     if (this._timer) {
  3.         clearTimeout(this._timer);
  4.         this._timer = null;
  5.     }
  6. };
  1. AudioPlaylist.prototype.nextTrack = function() {
  2.     return this.currentTrack = this._currentTrack == this._tracks.length ? 1 : this._currentTrack + 1;
  3. };
  1. AudioPlaylist.prototype.previousTrack = function() {
  2.     return this.currentTrack = this._currentTrack == 1 ? this._tracks.length : this._currentTrack - 1;
  3. };
  1. AudioPlaylist.prototype.setWidget = function(w) {
  2.     if (! (w.tagName == 'OL' || w.tagName == 'UL'))
  3.         throw new TypeError();
  4.  
  5.     w.querySelectorAll('li > span').forEach((e, i) => {
  6.         this._tracks[i].widget = e;
  7.         e.onclick = () => this.currentTrack = i + 1;
  8.     });
  9.  
  10.     View.prototype.setWidget.call(this, w);
  11.  
  12.     return this;
  13. };
  1. AudioPlaylist.prototype.createWidget = function() {
  2.     const playlist = [];
  3.  
  4.     for (let trackdata of this._tracks)
  5.         playlist.push(`<li><span>${trackdata.title}</span></li>`);
  6.  
  7.     const html = '<ol class="ojs_playlist">' + '\n' + playlist.join('\n') + '\n' + '</ol>';
  8.  
  9.     let template = document.createElement('template');
  10.  
  11.     template.innerHTML = html;
  12.  
  13.     let widget = template.content.children[0];
  14.  
  15.     this.setWidget(widget);
  16.  
  17.     return this;
  18. };
  1. AudioPlaylist.prototype.destroyWidget = function() {
  2.     View.prototype.destroyWidget.call(this);
  3.  
  4.     for (let trackdata of this._tracks)
  5.         delete trackdata.widget;
  6.  
  7.     return this;
  8. };
Test

Les pistes audio par djduppy sont disponibles sur Freesound.

djduppy.zip
testAudioPlaylist.phtml
  1. <?php $debug=true; ?>

Mettre $debug à true permet d'accéder dans la console du navigateur aux variables audioplayer, l'instance de AudioPlayer, et audioplaylist, l'instance de AudioPlaylist. Si $debug vaut false, tout le code en JavaScript est protégé par une fonction de fermeture.

  1. <?php $ojs_audiolistdir='/files/sounds/djduppy'; ?>
  2. <?php $ojs_audiolist=array('bigbeat', 'electro', 'garage', 'hardtrance', 'hipfunk', 'ragga'); ?>

Définit la liste des pistes audio jouées par le lecteur, i. e. leurs noms de fichier et le dossier sur le serveur qui les contient. Selon le type de fichier audio que le navigateur peut lire, le code ajoute l'extension .ogg ou .mp3 au nom d'une piste.

  1. <?php $id=uniqid('id'); ?>

Définit l'identifiant de la <div> qui encadre le HTML du lecteur audio.

  1. .ojs_playlist {
  2.     columns: 2;
  3. }
  4. .ojs_playlist li span:hover, .ojs_playlist li span.selected {
  5.     color: #3bc;
  6. }

Affiche la liste des pistes audio sur 2 colonnes. Change la couleur du titre sélectionné.

  1. <div id="<?php echo $id; ?>" class="noprint">
  2. <div class="ojs_audio">
  3. <span class="audiocontrols">
  4. <span class="audioplay"><i class="fas fa-3x fa-play-circle"></i></span>
  5. <span class="audiopause"><i class="fas fa-3x fa-pause-circle"></i></span>
  6. <input class="audiobar" type="range" min="0" max="100" step="1" value="0"/>
  7. <span class="audiotime">00:00:00</span>
  8. <span class="audioloop"><i class="fas fa-sm fa-sync-alt"></i></span>
  9. </span>
  10. </div>
  11. </div>

Crée les widgets de l'interface.

  1. <?php head('javascript', '/objectivejs/Objective.js'); ?>
  2. <?php head('javascript', '/objectivejs/Responder.js'); ?>
  3. <?php head('javascript', '/objectivejs/View.js'); ?>
  4. <?php head('javascript', '/objectivejs/AudioPlayer.js'); ?>
  5. <?php head('javascript', '/objectivejs/AudioPlaylist.js'); ?>

Inclut le code de toutes les classes nécessaires. RAPPEL : La fonction head de la librairie iZend ajoute une balise telle que <script src="/objectivejs/Objective.js"></script> à la section <head> du document HTML. Adaptez le code à votre environnement de développement.

  1. <?php if (!$debug): ?>
  2. (function() {
  3. <?php endif; ?>

Isole tout le code en JavaScript dans une fonction de fermeture si $debug vaut false.

  1.     const audioplayer = new AudioPlayer();
  2.  
  3.     const container = document.querySelector('#<?php echo $id; ?>');
  4.  
  5.     audioplayer.setManagedWidget(container.querySelector('.ojs_audio'));
  6.  
  7.     audioplayer.loop = true;
  8.  
  9.     const dirname = '<?php echo $ojs_audiolistdir; ?>';
  10.  
  11.     const filelist = [<?php echo implode(',', array_map(function($s) { return "'$s'"; }, $ojs_audiolist)); ?>];
  12.  
  13.     const filetype = audioplayer.canPlayType('audio/ogg') ? '.ogg' : '.mp3';
  14.  
  15.     const audiotracks = [];
  16.  
  17.     for (let filename of filelist)
  18.         audiotracks.push({title: filename, url: `${dirname}/${filename}${filetype}`});
  19.  
  20.     const audioplaylist = new AudioPlaylist(audioplayer, audiotracks);
  21.  
  22.     audioplaylist.createManagedWidget(container);
  23.  
  24.     audioplaylist.currentTrack = 1;
  1. <?php if (!$debug): ?>
  2. })();
  3. <?php endif; ?>

Ferme la fonction qui isole le code en JavaScript si $debug vaut false.

VOIR AUSSI

View, AudioPlayer, Écrire des données sur un serveur

Commentaires

Votre commentaire :
[p] [b] [i] [u] [s] [quote] [pre] [br] [code] [url] [email] strip aide 2000

Entrez un maximum de 2000 caractères.
Améliorez la présentation de votre texte avec les balises de formatage suivantes :
[p]paragraphe[/p], [b]gras[/b], [i]italique[/i], [u]souligné[/u], [s]barré[/s], [quote]citation[/quote], [pre]tel quel[/pre], [br]à la ligne,
[url]http://www.izend.org[/url], [url=http://www.izend.org]site[/url], [email]izend@izend.org[/email], [email=izend@izend.org]izend[/email],
[code]commande[/code], [code=langage]code source en c, java, php, html, javascript, xml, css, sql, bash, dos, make, etc.[/code].