I want to make 1 player on top of the page and below there will be MP3 files with links to them. It is necessary to make it so that when you click the button next to the links, the link would be transferred to the player and the track would start playing.

Tell me how and what this whole thing to do.

  • Show what you have already done. - br3t
  • I managed to make only a lot of players on each link: (Example: forum.ideah.ru/search/Tata+Simonyan There’s something like this on Flash)) - Idon

1 answer 1

Example:

var tracks=[ //urls of mp3s "https://archive.org/download/tsp1997-01-24.AT.TC-D5M.flac16/tsp1997-01-24d1t05.mp3", "https://archive.org/download/tsp1997-01-24.AT.TC-D5M.flac16/tsp1997-01-24d2t02.mp3", "https://archive.org/download/tsp1997-01-24.AT.TC-D5M.flac16/tsp1997-01-24d2t03.mp3", "https://archive.org/download/tsp1997-01-24.AT.TC-D5M.flac16/tsp1997-01-24d1t10.mp3" ]; var audioEl = document.getElementsByTagName('audio')[0]; var buttons = document.getElementsByTagName('button'); for(i = 0; i < buttons.length; i++) { buttons[i].addEventListener('click', function(){ loadAudio(this.dataset.id - 1, true); }); } function loadAudio(id, autoplay = false) { audioEl.preload=true; audioEl.controls=true; audioEl.src=tracks[id]; if (autoplay) audioEl.play(); } loadAudio(0); 
 <button data-id="1">трек 1</button> <button data-id="2">трек 2</button> <button data-id="3">трек 3</button> <button data-id="4">трек 4</button> <audio src="">2</audio>

Instead of an array and data-id attributes, you can put links into data-audiourl and take a link from there and insert it into the track.

The point is to take them from the element and insert it into the src attribute of the audio element, and then launch it or not launch it and control it as you like.

An example immediately with links in the buttons

 var audioEl = document.getElementsByTagName('audio')[0]; var buttons = document.getElementsByTagName('button'); for(i = 0; i < buttons.length; i++) { buttons[i].addEventListener('click', function(){ loadAudio(this.dataset.url, true); }); } function loadAudio(url, autoplay = false) { audioEl.preload=true; audioEl.controls=true; audioEl.src=url; if (autoplay) audioEl.play(); } loadAudio(buttons[0].dataset.url); 
 <button data-url="https://archive.org/download/tsp1997-01-24.AT.TC-D5M.flac16/tsp1997-01-24d1t05.mp3">трек 1</button> <button data-url="https://archive.org/download/tsp1997-01-24.AT.TC-D5M.flac16/tsp1997-01-24d2t02.mp3">трек 2</button> <button data-url="https://archive.org/download/tsp1997-01-24.AT.TC-D5M.flac16/tsp1997-01-24d2t03.mp3">трек 3</button> <button data-url="https://archive.org/download/tsp1997-01-24.AT.TC-D5M.flac16/tsp1997-01-24d1t10.mp3">трек 4</button> <audio src=""></audio>