How to Embed YouTube as an Audio Player

Here’s everything you need to know about converting the classical default YouTube video player into a peppy audio player, and embed the same into your website or blog as any other audio player.

How do you insert the audio part of any YouTube video to your web site? You might perhaps be going the conventional way by first converting the video clip into an mp3 audio file and then uploading it to any audio hosting platform like Soundcloud.

It works in 10 out of 10 cases, but there’s every likelihood that YouTube may have issues with it since various copyrights might be in picture.

YouTube Audio Player

There’s even a straightforward method that makes use of the official YouTube API and needs no conversion.

However, here’s one simple technique through which you can embed any YouTube video on your website and visitors can effortlessly play or pause the YouTube video audio with a simple mouse-click. Moreover, you can also use this method to set any YouTube video as a web page or web site background audio running in loop.

How to Embed YouTube Audio

All it needs is a simple step to embed any YouTube audio. Run a YouTube video and grab its YouTube ID, which is a string of some 11 characters.

Next copy and paste the code below anywhere on your website and replace VIDEO_ID with actual ID of your YouTube video. Now copy-paste the code given below on your web page, replacing the VIDEO_ID with the ID of YouTube video you intend to embed.

how to embed youtube as an audio player

  1. <div data-video=”VIDEO_ID”
  2. data-autoplay=”0″
  3. data-loop=”1″
  4. id=”youtube-audio”>
  5. </div>
  6. <script src=”https://www.youtube.com/iframe_api”></script>
  7. <script src=”https://cdn.rawgit.com/geekermagazine/files/master/yt.js”></script>

Also, there’re a few secondary parameters you will need to alter as per your preference and requirement. For example, by setting data-autoplay to 1, your video will start playing once you load a webpage. In similar manner, if you wish to play the audio continuously in a loop on your active web page, set data-loop to 1.

The method works flawless on desktops as well as mobile browsers since the YouTube video gets rendered through an IFRAME player. The images are hosted on Imgur while JS files are on Github. However, Geeker Magazine recommends you to copy and save your assets on your very own server prior to deploying this on a website with heavy traffic.

YouTube Audio – Technical Facts

We make use of YouTube JS API to render a general YouTube player with the height and width set to 0 pixels. On clicking the audio button, the existing state of YouTube player gets toggled and the video starts to play or pause.

Given below is the annotated version of the source code that can be deployed effectively for embedding YouTube playlists. Moreover, the default playback volume of the audio can also be altered or you can also embed a segment of the YouTube audio.