How to Embed YouTube as an Audio Player

How do you embed the audio portion of any YouTube video into your website? An easy option would be that you convert the YouTube video into an MP3 file and upload it to an audio hosting site like Soundcloud. This will work but YouTube is very likely to have a problem with your approach due to copyright issues.

YouTube Audio Player

There’s a simpler approach as well that uses the official YouTube API and requires no file conversion.

You can embed any YouTube video in your web pages and visitors on your site will be able to play and pause the video audio with a simple click. With this technique, you can also use a YouTube video as background audio that runs in a loop.

Check out this live demo. It may resemble an embedded audio player but there’s actually this YouTube video that’s playing in the background.

How to Embed YouTube Audio

It takes just one step to embed a YouTube audio. Open any YouTube video and make a note of the YouTube Video ID (a string of 11 characters).

Next copy-paste the code below anywhere on your website and replace VIDEO_ID with actual ID of your YouTube video.

<div data-video="VIDEO_ID" data-autoplay="0" data-loop="1" id="youtube-audio"></div>
<script src="https://www.youtube.com/iframe_api"></script>
<script src="https://cdn.rawgit.com/labnol/files/master/yt.js"></script>

There are few other configuration parameters that you can change depending on requirements. For instance, if you set data-autoplay to 1, the audio will begin playing immediately on page load. Likewise, set data-loop to 1 and the audio will play continuously in a never-ending loop until manually stopped.

This internally renders the YouTube video using the IFRAME player and would thus work on both desktop and mobile browsers.

The JavaScript files are hosted on Github while the images are hosted on Imgur. It is recommended that you copy the assets to your own server before deploying on a heavy-traffic website.

YouTube Audio - The Technical Details

We are using the YouTube JavaScript API that renders a regular YouTube player but with the width and height set to 0 pixels. When the user clicks the audio button, it toggles the existing YouTube player state and the video begins to play or pauses.

Here’s the annotated version of the source code. It can be extended to embed YouTube playlists, the default playback volume can be changed or you even embed a part of the video.

YouTube Audio Embed

Amit Agarwal

Amit Agarwal

Google Developer Expert, Google Cloud Champion

Amit Agarwal is a Google Developer Expert in Google Workspace and Google Apps Script. He holds an engineering degree in Computer Science (I.I.T.) and is the first professional blogger in India.

Amit has developed several popular Google add-ons including Mail Merge for Gmail and Document Studio. Read more on Lifehacker and YourStory

0

Awards & Titles

Digital Inspiration has won several awards since it's launch in 2004.

Google Developer Expert

Google Developer Expert

Google awarded us the Google Developer Expert award recogizing our work in Google Workspace.

ProductHunt Golden Kitty

ProductHunt Golden Kitty

Our Gmail tool won the Lifehack of the Year award at ProductHunt Golden Kitty Awards in 2017.

Microsoft MVP Alumni

Microsoft MVP Alumni

Microsoft awarded us the Most Valuable Professional (MVP) title for 5 years in a row.

Google Cloud Champion

Google Cloud Champion

Google awarded us the Champion Innovator title recognizing our technical skill and expertise.

Email Newsletter

Sign up for our email newsletter to stay up to date.

We will never send any spam emails. Promise.