Question

145

How to play audio only from youtube videos using HTML and javascript

rated 0 times [ 149] [ 4] / answers: 1 / hits: 17624 / 8 Years ago, tue, october 18, 2016, 12:00:00

What I'm trying to do: Create a list of items which contains a link to play audio from a youtube video beside each item

What I'm currently doing: I'm able to do this for a single item using the below:

<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>

This creates a play button and works perfectly on a single item, however will not work with multiple items on the same page presumably since they all use the same ID. Creating a different ID causes the player to not function. Creating two different data-video's with the same ID will only allow the first one to play, the other will appear correctly but not operate when pressing play.

Looking for solution: Preferably how to use the existing script for multiple videos on the same page. Otherwise an alternative solution for playing audio only on youtube videos with a custom play button would be great.

Thanks!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

karladaijahf

Add To Favorites

Follow

Total Points: 78

Total Questions: 123

Total Answers: 89

Location: Liechtenstein

Member since Wed, Dec 8, 2021

3 Years ago

answered 8 Years ago andreguym · Accepted Answer

If you want you can just copy paste your code like this

https://jsfiddle.net/8wkjqf3m/

and it works, I'm not sure if you were having a problem doing that or if your problem was elsewhere. It is of course very sloppy looking and the code should be reworked so that you don't have to hard code every function for every video.

I tried to do everything dynamically and failed. I'm not sure if it is possible to dynamically make a function that makes a new YT.player for every video id you have and also have the onPlayerReady and onPlayerStateChange functions dynamically made to go with it. I'm sure there is some way but I couldn't figure it out.

The idea though is to make multiple youtube-audio divs with different ids for however many youtube players you want to have and have matching multiple youtube-player divs for the iframe to function. You can generate that part with javascript if you want so that you don't have to pollute your code with a bunch of repetitive html.

You can make all of your ids dynamically too.

var array = ['put a video id here','put a video id here','put a video id here'];

array = array.map(function(element,index) {

  var div = document.createElement('div');

  div.setAttribute('id', 'youtube-audio-' + index);

  return {'videoId': element, 'div': div };

}

You can just have an array holding the youtube video ids and then initialize all of the divs data-video attributes using

document.getElementById(youtube-audio-1).dataset.video = //youtube video id

I don't see the point in doing all of that dynamically though if there is no way to get around copy pasting x number of new YT.players and onPlayerReadys etc...

Good Luck, let me know if I was in the right area or if that was not what you wanted