Embed YouTube video as Audio Player in Website

Sarmad Gardezi

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

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 thevideoaudio with a simple click. With this technique, you can also use a YouTube video as background audio that runs in a loop.

Well i found many people with this issue that they want only audio in their website. So, for them i made this simple script with Youtube API that help you to embed your video with with only audio.

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 you can get it from any youtube video URL (a string of 11 characters).

Next copy-paste the code below anywhere on your website and replaceVIDEO_IDwith 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://gist.github.com/sarmadgardezi/a0db67456d6849bf5697bcf290f5d84a.js"></script>

There are just few line of codes that you have to change it before using them in to your website. For instance, if you setdata-autoplayto 1, the audio will begin playing immediately on page load. Likewise, setdata-loopto 1 and the audio will play continuously in a never-ending loop until manually stopped.

See the Demo of project. The JavaScript files arehosted on Githubwhile theimages are hostedon Developers PK. It is recommended that you copy the assets to your own server before deploying on a heavy-traffic website.

image

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.

Don’t you think its easy way to embed any song from youtube in to your website so that people can listen is easily.

More great articles

Host Audio File in Google Drive & Embed it on Website

Many websites like Soundcloud and Reverbnation use image hosting and are large platforms of Sound Hosting websites. But you can…

Read Story

Top Sites for Online Education, Job Search & Paid Internships

The Learn movement has picked up momentum worldwide and that is actually a good thing as even basic programming skills can…

Read Story

How to get Real YouTube views and Subscribers in Pakistan

All we know that youtube is second biggest search engine on the planet after google, it generates an estimate 92…

Read Story
Arrow-up