html 5 и тег audio (1 плеер и треки на странице)

334
03 апреля 2017, 08:30

Хочу сделать 1 плеер сверху страницы и ниже будут MP3 файлы с ссылками на них. Нужно сделать так, чтобы при нажатии кнопки рядом с ссылками, ссылка передавалась бы в плеер и начинал проигрываться трек.

Подскажите, как и чем это всё дело сделать.

Answer 1

Пример:

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>

Вместо массива и атрибутов data-id, можно ссылки поместить в data-audiourl и брать ссылку оттуда и вставлять в трек.

Смысл в том, чтоб брать их из элемента и вставлять в атрибут src элемента audio, а потом запускать его или не запускать и управлять им, как захочется

Пример сразу с ссылками в кнопках

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>

ПОСЛЕДНИЕ ВОПРОСЫ
Все вопросы
Подробнее о сайте mario.kiev.ua
ТОП-10
READ ALSO
не могу сделать авторизацию с яндекс диском
PHP

не могу сделать авторизацию с яндекс диском

есть код пишет не авторизован

 578
Таймаут очереди сообщений php
PHP

Таймаут очереди сообщений php

Хотелось бы реализовать общение между двумя процессами на сервере через средства php для реализации long-poolingДля этой цели php был собран с ключами...

 359
обработать json данные
PHP

обработать json данные

получаю ответ от api яндекс диска но дальше проблема не могу преобразовать json такой ответ имею

 289
Лямбды, потоки и статические переменные
c++

Лямбды, потоки и статические переменные

Предположим, что такое использование статической переменной как счетчика входов в лямбда-функцию легально:

 470