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="http://ift.tt/2cPXBSW;

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

The story, How to Embed YouTube as an Audio Player, was originally published at Digital Inspiration by Amit Agarwal on 03/10/2016 under Embed, YouTube, Internet.

source:http://ift.tt/U9QnN1

Comments

Post a Comment

Popular posts from this blog

The 101 Most Useful Websites

-
Image
Presenting the 101 most useful websites on the internet. These sites, well most of them, solve at least one problem really well and they all have simple web addresses (URLs) that you can memorize thus saving you a trip to Google. The Most Useful Websites and Web Apps ctrlq.org/screenshots  – for capturing  screenshots of web pages  on mobile and desktops. dictation.io  – online voice recognition in the browser itself. zerodollarmovies.com  – find full-length movies on YouTube. screenr.com  – record movies of your desktop and send them straight to YouTube. goo.gl  – shorten long URLs and convert URLs into  QR codes . unfurlr.come  – find the original URL that’s hiding behind a short URL. qClock  – find the local time of a city using a  Google Map . copypastecharacter.com  – copy special characters that aren’t on your keyboard. postpost.com  – a better search engine for twitter. lovelycharts.com  – c...
Read more

Compare MacBook Prices Worldwide with Google Sheets

-
Image
Looking to buy the new Macbook Pro with M3 chips? Wondering if it would be cheaper to purchase a Macbook in your local Apple store, or ask a friend who is travelling from Singapore or Japan to bring one for you? Here’s a Google Sheet that can help you compare prices of MacBooks in different countries. It takes the current prices of MacBooks from Apple online stores in different countries and converts them to a common currency (US Dollars). The exchange rates are fetched directly from Google Finance so the prices will update automatically when the exchange rates change. How the Macbook Price Comparison Sheet Works I have written a Node.js script that fetches the current prices of MacBooks from the Apple website and writes them to Google Sheets. Here’s the code that scrapes the Apple website and parses the HTML to extract the prices. Get Macbook Prices from Apple Website Apple uses JSON-LD to embed structured pricing data in their web pages that can be easily parsed using che...
Read more

Interesting Websites to Visit When You’re Bored

-
The 15 Interesting Websites Dear Photograph  – The website features photographs of people holding up old pictures that were taken at the exact spot several years ago. Some of the best photographs are now compiled in a  book  (dearphotograph.me). Textastrophe  – This website is a reminder of why you shouldn’t post your cell phone number on public websites. The creator starts a text conversation with random numbers found on Craigslist ads and publishes the transcript on the internet. The chats are funny and I hope its real because  screenshots can be faked  too (textastrophe.com). Stratocam  – This is like an online self-running slideshow showcasing some of the best satellite images found on Google Maps. Run the website in full-screen mode (Ctrl+Shift+F) and you may discover pretty and unexpected place on our beautiful earth (stratocam.com). Awkward Family Photos  – This is a place where people share embarrassing pictures of their loved ones i...
Read more