How to play only the audio of a Youtube video using HTML 5

Question

Is it possible to play only the audio from a YouTube video using HTML 5 and Javascript

User · Answer

VIDEO ID with actual ID of your YouTube video    lt div data-video  VIDEO ID            data-autoplay  0                   data-loop  1                       id  youtube-audio  gt    lt  div gt     lt script src  https   www youtube com iframe api  gt  lt  script gt    lt script src  https   cdn rawgit com labnol files master yt js  gt  lt  script gt

User · Answer

Embed the video player and use CSS to hide the video  If you do it properly you may even be able to hide only the video and not the controls below it   However  I d recommend against it  because it will be a violation of YouTube TOS  Use your own server instead if you really want to play only audio

User · Answer

The answer is simple  Use a 3rd party product like jwplayer or similar  then set it to the minimal player size which is the audio player size  only shows player controls    Voila   Been using this for over 8 years

User · Answer

x000D   x000D     YouTube video ID var videoID    CMNry4PE93Y       Fetch video info  using a proxy to avoid CORS errors  fetch  https   cors-anywhere herokuapp com      https   www youtube com get video info video id     videoID  then response   gt      if  response ok        response text   then ytData   gt                    parse response to find audio info       var ytData   parse str ytData         var getAdaptiveFormats   JSON parse ytData player response  streamingData adaptiveFormats        var findAudioInfo   getAdaptiveFormats findIndex obj   gt  obj audioQuality                   get the URL for the audio file       var audioURL   getAdaptiveFormats findAudioInfo  url                  update the  lt audio gt  element src       var youtubeAudio   document getElementById  youtube          youtubeAudio src   audioURL                          function parse str str      return str split   amp    reduce function params  param        var paramSplit   param split      map function value          return decodeURIComponent value replace                         params paramSplit 0     paramSplit 1       return params              x000D   lt audio id  youtube  controls gt  lt  audio gt  x000D   x000D   x000D

User · Answer

This may be an old post but people could still be searching for this so here you go    lt div style  position relative width 267px height 25px overflow hidden   gt   lt div style  position absolute top -276px left -5px  gt   lt iframe width  300  height  300     src  https   www youtube com embed youtubeID rel 0  gt   lt  iframe gt   lt  div gt   lt  div gt

User · Answer

x000D   x000D  var vid    bpt84ceWAY0   x000D      audio streams       x000D      audio tag   document getElementById  youtube    x000D   x000D  fetch  https     vid  -focus-opensocial googleusercontent com gadgets proxy container none amp url https 3A 2F 2Fwww youtube com 2Fget video info 3Fvideo id 3D    vid  then response   gt    x000D      if  response ok    x000D          response text   then data   gt    x000D   x000D              var data   parse str data   x000D                  streams    data url encoded fmt stream map         data adaptive fmts  split       x000D   x000D              streams forEach function s  n    x000D                  var stream   parse str s   x000D                      itag   stream itag   1  x000D                      quality   false  x000D                  console log stream   x000D                  switch  itag    x000D                      case 139  x000D                          quality    48kbps   x000D                          break  x000D                      case 140  x000D                          quality    128kbps   x000D                          break  x000D                      case 141  x000D                          quality    256kbps   x000D                          break  x000D                    x000D                  if  quality  audio streams quality    stream url  x000D                  x000D   x000D              console log audio streams   x000D   x000D              audio tag src   audio streams  128kbps    x000D              audio tag play    x000D             x000D        x000D      x000D   x000D  function parse str str    x000D      return str split   amp    reduce function params  param    x000D          var paramSplit   param split      map function value    x000D              return decodeURIComponent value replace             x000D              x000D          params paramSplit 0     paramSplit 1   x000D          return params  x000D              x000D    x000D   lt audio id  youtube  autoplay controls loop gt  lt  audio gt  x000D   x000D   x000D

User · Answer

I agree with Tom van der Woerdt  You could use CSS to hide the video  visibility hidden or overflow hidden in a div wrapper constrained by height   but that may violate Youtube s policies  Additionally  how could you control the audio  pause  stop  volume  etc     You could instead turn to resources such as http   www houndbite com  to manage audio

User · Answer

You can parse Youtube meta file for all streams available for this particular video id using this link  https   www youtube com get video info video id  VID  and extract audio only streams   Here is an example with public Google Image proxy  but you can use any free or your own CORS proxy     x000D   x000D  var vid    3r Z5AYJJd4   x000D      audio streams       x000D      audio tag   document getElementById  youtube    x000D   x000D  fetch  https     vid  -focus-opensocial googleusercontent com gadgets proxy container none amp url https 3A 2F 2Fwww youtube com 2Fget video info 3Fvideo id 3D    vid  then response   gt    x000D      if  response ok    x000D          response text   then data   gt    x000D   x000D              var data   parse str data   x000D                  streams    data url encoded fmt stream map         data adaptive fmts  split       x000D   x000D              streams forEach function s  n    x000D                  var stream   parse str s   x000D                      itag   stream itag   1  x000D                      quality   false  x000D                  console log stream   x000D                  switch  itag    x000D                      case 139  x000D                          quality    48kbps   x000D                          break  x000D                      case 140  x000D                          quality    128kbps   x000D                          break  x000D                      case 141  x000D                          quality    256kbps   x000D                          break  x000D                    x000D                  if  quality  audio streams quality    stream url  x000D                  x000D   x000D              console log audio streams   x000D   x000D              audio tag src   audio streams  128kbps    x000D              audio tag play    x000D             x000D        x000D      x000D   x000D  function parse str str    x000D      return str split   amp    reduce function params  param    x000D          var paramSplit   param split      map function value    x000D              return decodeURIComponent value replace             x000D              x000D          params paramSplit 0     paramSplit 1   x000D          return params  x000D              x000D    x000D   lt audio id  youtube  autoplay controls loop gt  lt  audio gt  x000D   x000D   x000D    Doesn t work for all videos  very depends on monetization settings or something like that

User · Answer

Adding to the mentions of jwplayer and possible TOS violations  I would like to to link to the following repository on github  YouTube Audio Player Generation Library  that allows to generate the following output     Library has the support for the playlists and PHP autorendering given the video URL and the configuration options

User · Answer

UPDATED FOR 2020 It seems in Septeber 2019  YouTube updated the values that are returned by get video info  Rather than data url encoded fmt stream map and data adaptive fmts  as used in the other older examples  now we are looking for for data formats and data adaptiveFormats  Anyways here is what you are all here for some code that loads a YouTube video into an  lt audio gt  element   Try it on CodePen  x000D   x000D     YouTube video ID var videoID    CMNry4PE93Y       Fetch video info  using a proxy to avoid CORS errors  fetch  https   cors-anywhere herokuapp com      https   www youtube com get video info video id     videoID  then response   gt      if  response ok        response text   then ytData   gt                    parse response to find audio info       var ytData   parse str ytData         var getAdaptiveFormats   JSON parse ytData player response  streamingData adaptiveFormats        var findAudioInfo   getAdaptiveFormats findIndex obj   gt  obj audioQuality                   get the URL for the audio file       var audioURL   getAdaptiveFormats findAudioInfo  url                  update the  lt audio gt  element src       var youtubeAudio   document getElementById  youtube          youtubeAudio src   audioURL                          function parse str str      return str split   amp    reduce function params  param        var paramSplit   param split      map function value          return decodeURIComponent value replace                         params paramSplit 0     paramSplit 1       return params              x000D   lt audio id  youtube  controls gt  lt  audio gt  x000D   x000D   x000D

[javascript] How to play only the audio of a Youtube video using HTML 5?

Examples related to javascript

Examples related to html

Examples related to audio

Examples related to youtube