Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Membre à l'essai
    Homme Profil pro
    Développeur Web
    Inscrit en
    décembre 2012
    Messages
    19
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loiret (Centre)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : décembre 2012
    Messages : 19
    Points : 10
    Points
    10

    Par défaut Stream d'un fichier MP3 depuis un Webdav vers un audio HTML avec Express

    Bonjour,

    J'ai actuellement une instance Nextcloud qui contient toutes mes musiques. Elles sont rangées dans différents dossiers. Sur mon app web, une fois sélectionner le dossier source, cela ramène vers un player qui contient la liste des musiques.
    Si je clique sur une musique elle devra se lire dans le player <audio></audio> classique. J'avais déjà fais ce système mais en utilisant des fichiers mp3 rangés dans un dossier à coté du server.js Cela marche très bien.

    Seulement, avec Webdav, quand je choisis une musique, cela ne fonctionne pas. Une erreur est retournée :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    The media resource indicated by the src attribute or assigned media provider object was not suitable.
    Voici le lien du paquet que j'ai utiliser pour communiquer avec le webdav côté serveur vers mon Nextcloud : https://www.npmjs.com/package/webdav.

    Code côté client
    pour récupérer la musique et la lancer :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
    function playMusic(id) {
          player[0].src = 'music' + musicsList[id];
          player[0].play();
    };
    Côté serveur, route qui récupère le path vers la musique dans le webdav :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
     
    // Route
    router.get('/music/:id*', function (req, res) {
      let config;
     
      try {
        config = db.getData('/config');
      } catch (err) {
        return res.redirect('/settings');
      }
     
      musics.read(config.webdav.username, config.webdav.password, config.webdav.url, req.params.id, (result) => {
        return res.send(result);
      });
    });
     
    // musics.read()
    const webdav = require('webdav');
     
    module.exports = {
      read: function (username, password, url, path, result) {
        let client = webdav(
          url,
          username,
          password
        );
     
        client
          .getFileContents(path)
          .then((data) => {
            return result(data);
          })
          .catch(() => {
            return result(false);
          });
      }
    };
    Le getFileContents return un ArrayBuffer mais cela ne semble pas lisible avec le player[0].src.

    J'ai imaginé plusieurs solution, comme créer un fichier temporaire mp3 puis le rendre lisible au player grâce au paquet https://www.npmjs.com/package/mediaserver puis faire un :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    mediaserver.pipe(req, res, pathToMp3);
    Dans la route /music/id*

    (méthode que j'utilisais avec les fichiers mp3 classique stocké en local) mais cela ne fonctionne pas avec le webdav.
    Il y a aussi des méthodes createReadStream et createWriteStream avec le paquet webdav mais j'avoue que je bloque sur l'utilisation avec un player classique <audio></audio>

    Si jamais il y a des connaisseurs en Buffer, Stream etc... je suis preneur, merci d'avances !

  2. #2
    Membre chevronné
    Inscrit en
    octobre 2011
    Messages
    1 263
    Détails du profil
    Informations forums :
    Inscription : octobre 2011
    Messages : 1 263
    Points : 2 221
    Points
    2 221

    Par défaut

    Une façon de le faire est d'envoyer une chaîne de caractères base64-encodés qui représente les données binaires obtenues et stockées dans un ArrayBuffer. Cette chaîne doit à sa tête le signature "data:audio/mp3;base64," et puis les données ainsi base64 encodées. Elle est appelée des données URI que le client html5 (même html4) supporte bien.

    Dans la technicité de tout ça...
    [1] côté serveur
    On peut simplement utiliser un module qui s'appelle base64-arraybuffer qu'on peut trouver et faire charger facilement au dépôt public. Supposons que l'arraybuffer déjà obtenu est stocké dans une variable abuf. On peut faire envoyer par la réponse comme ça.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    const ba=require('base64-arraybuffer');
    //...
    //var abuf déjà établie
    //...
    var base64audio='data:audio/mp3;base64,'+ba.encode(abuf);
    res.send(base64audio);
    [2] côté client
    Supposons que l'élément audio s'écrire comme une simple exemple en ajoutant un événnement click.
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    <div>
        <audio controls="controls" id="une_chanson" preload="none" onclick="loadit(this)"></audio>
        <label for="une_chanson">une-chanson.mp3</label>
    </div>
    Dans la fonction traitement du click, on peut faire appeler un simple XmlHttpRequest pour faire charger le uri. On peut utiliser jquery pour sa simplicité d'écriture.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    function loadit(elem) {
        if (elem.src.length==0) {
            $.ajax({
                type: 'GET',
                url: 'http://xxx.xxx.xxx.xxx/music/'+elem.id,
                success: function(res) {
                    elem.src=res;
                    elem.play();
                }
            });
     
        } else {
            elem.play();
        }
    }
    Voilà qui doit fonctionner et que j'ai mis en place de démo simple.

  3. #3
    Membre à l'essai
    Homme Profil pro
    Développeur Web
    Inscrit en
    décembre 2012
    Messages
    19
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loiret (Centre)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : décembre 2012
    Messages : 19
    Points : 10
    Points
    10

    Par défaut Re

    Bonjour,

    Merci pour votre réponse, je pense que cette explication va bien me servir. Je vais garde ça de côté, mais pour le moment j'ai ouvert une issue Github sur le paquet webdav car il s'avère que le content des fichiers n'est pas lu correctement. Le .mp3 contient un message disant This is the WebDAV interface. It can only be accessed by WebDAV clients such as the Nextcloud desktop sync client j'imagine que c'est pour cela que le lecteur audio ne pouvais pas lire le fichier. Cela paraît évident maintenant.

    https://github.com/perry-mitchell/we...ent/issues/115

    Merci pour l'aide, je vais essayer de résoudre le problème de lecture du fichier, puis regarder de plus près le paquet pour le buffer. Je tiendrais au courant de l'avancé des choses.

Discussions similaires

  1. [XL-2010] Demande d'aide exporter les donnés depuis un classeur vers d'autre classeur avec macro
    Par l'aprentisse dans le forum Macros et VBA Excel
    Réponses: 10
    Dernier message: 12/08/2016, 02h07
  2. Streaming Audio fichier MP3
    Par GGelec dans le forum Android
    Réponses: 2
    Dernier message: 13/03/2012, 16h46
  3. [Débutant] Streaming d'un fichier mp3 d'un serveur au site en ASP.NET
    Par dark-skywalker dans le forum ASP.NET
    Réponses: 7
    Dernier message: 18/01/2012, 21h57
  4. Réponses: 1
    Dernier message: 09/11/2009, 00h27
  5. Réponses: 3
    Dernier message: 25/07/2002, 11h42

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo