web-dev-qa-db-fra.com

Comment lire uniquement l'audio d'une vidéo Youtube en utilisant HTML 5?

Est-il possible de lire uniquement l'audio d'une vidéo YouTube en utilisant HTML 5 et Javascript?

javascripthtml5audioyoutube
25
user979830

Intégrez le lecteur vidéo et utilisez CSS pour masquer la vidéo. Si vous le faites correctement, vous pourrez même ne masquer que la vidéo et non les commandes situées en dessous.

Cependant, je le déconseille, car ce sera une violation de YouTube TOS. Utilisez plutôt votre propre serveur si vous voulez vraiment lire uniquement de l'audio.

14
Tom van der Woerdt

Vous pouvez analyser le méta-fichier Youtube de tous les flux disponibles pour cet identifiant vidéo particulier en utilisant ce lien: https://www.youtube.com/get_video_info?video_id={VID} et extraire les flux uniquement audio.

Voici un exemple avec un proxy public Google Image (mais vous pouvez utiliser n'importe quel proxy gratuit ou votre propre proxy CORS):

var vid = "3r_Z5AYJJd4",
  audio_streams = {};

$.get("https://images"+~~(Math.random()*33)+"-focus-opensocial.googleusercontent.com/gadgets/proxy?container=none&url=https%3A%2F%2Fwww.youtube.com%2Fget_video_info%3Fvideo_id%3D" + vid, function(data) {
  var data = parse_str(data),
    streams = (data.url_encoded_fmt_stream_map + ',' + data.adaptive_fmts).split(',');
  console.log(streams);
  $.each(streams, function(n, s) {
    var stream = parse_str(s),
      itag = stream.itag * 1,
      quality = false;
    console.log(stream);
    switch (itag) {
      case 139:
        quality = "48kbps";
        break;
      case 140:
        quality = "128kbps";
        break;
      case 141:
        quality = "256kbps";
        break;
    }
    if (quality) audio_streams[quality] = stream.url;
  });
  console.log(audio_streams);
  $("#youtube").attr({
    src: audio_streams['128kbps']
  }).get(0).play();
});

function parse_str(str) {
  return str.split('&').reduce(function(params, param) {
    var paramSplit = param.split('=').map(function(value) {
      return decodeURIComponent(value.replace('+', ' '));
    });
    params[paramSplit[0]] = paramSplit[1];
    return params;
  }, {});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<audio id="youtube" autoplay controls loop></audio>

Ne fonctionne pas pour toutes les vidéos, tout dépend des paramètres de monétisation ou de quelque chose comme ça.

19
350D

C'est peut-être un vieux post, mais les gens pourraient toujours être à la recherche de ça alors voilà

<div style="position:relative;width:267px;height:25px;overflow:hidden;">
<div style="position:absolute;top:-276px;left:-5px">
<iframe width="300" height="300" 
  src="https://www.youtube.com/embed/youtubeID?rel=0">
</iframe>
</div>
</div>
6
Richard Waterworth

La réponse est simple: Utilisez un produit tiers, tel que jwplayer ou similaire, , Puis réglez-le sur la taille minimale du lecteur, qui est la taille du lecteur audio (affiche uniquement les commandes du lecteur).

Voila.

Je l'utilise depuis plus de 8 ans.

4
shindiggah

Ajoutant aux mentions de jwplayer et d’éventuelles violations des TOS, je voudrais faire un lien vers le référentiel suivant sur github: Bibliothèque de génération de lecteur audio YouTube , qui permet de générer le résultat suivant:

 enter image description here

Library prend en charge les listes de lecture et PHP le rendu automatique à l'aide de l'URL de la vidéo et des options de configuration.

0
berezovskyi

Je suis d'accord avec Tom van der Woerdt. Vous pouvez utiliser CSS pour masquer la vidéo (visibilité: masqué ou débordement: masqué dans un wrapper div limité par la hauteur), mais cela pourrait enfreindre les règles de Youtube. De plus, comment pouvez-vous contrôler l'audio (pause, arrêt, volume, etc.)?

Vous pourriez plutôt vous tourner vers des ressources telles que http://www.houndbite.com/ pour gérer l'audio.

0
dangerChihuahua007