Есть самопальный плеер на JavaScript, если я добавляю второй элемент <audio>
, то он работает лишь с первым источником, игнорируя другой, то есть переключения не происходит.
Как воспроизводимый audio останавливать и выполнять play на другом? Учитывая что id
един.
В итоге, хотелось бы чтобы он легко смог переключаться между треками.
HTML
<div id="wrapper">
<audio id="mytrack" controls>
<source src="1.mp3" type="audio/mp3">
</audio>
<audio id="mytrack" controls>
<source src="1.mp3" type="audio/mp3">
</audio>
<nav>
<div id="defaultbar">
<div id="progressBar"></div>
</div>
<div id="buttons">
<button type="button" id="playButton"</button>
<button type="button" id="muteButton"></button>
<span id="currentTime">0:00</span>
<span id="fullDuration">0:00</span>
</div>
</nav>
JS
var mytrack = document.getElementById('mytrack');
var playButton = document.getElementById('playButton');
var muteButton = document.getElementById('muteButton');
var duration = document.getElementById('fullDuration');
var currentTime = document.getElementById('currentTime');
var barSize = 640;
var bar = document.getElementById("defaultbar");
var progressBar = document.getElementById('progressBar');
mytrack.addEventListener("loadedmetadata", changeDuration);
function changeDuration() {
var minutes = parseInt(mytrack.duration/60);
var seconds = pad(parseInt(mytrack.duration%60));
duration.innerHTML = minutes+":"+seconds;
}
playButton.addEventListener('click', playOrPause, false);
playbut.addEventListener('click', playOrPause, false);
muteButton.addEventListener('click', muteOrUnmute,false);
bar.addEventListener('click', clickedBar, false);
function playOrPause() {
if(!mytrack.paused && !mytrack.ended) {
mytrack.pause();
playButton.style.backgroundImage = 'url(https://pp.vk.me/c637617/v637617622/1dd8c/UEl9FgLZ8Uk.jpg)';
window.clearInterval(updateTime);
}
else {
mytrack.play();
playButton.style.backgroundImage = 'url(https://pp.vk.me/c637617/v637617622/1dd85/CC4adfFPVDA.jpg)';
updateTime = setInterval(update , 1);
}
}
function muteOrUnmute() {
if(mytrack.muted == true) {
mytrack.muted = false;
muteButton.style.backgroundImage = 'url(https://pp.vk.me/c637617/v637617622/1dd93/VaNlI7pWMkE.jpg)';
}
else {
mytrack.muted = true;
muteButton.style.backgroundImage = 'url(https://pp.vk.me/c637617/v637617622/1dd93/VaNlI7pWMkE.jpg)';
}
}
function update() {
if(!mytrack.ended) {
var playedMinutes = parseInt(mytrack.currentTime/60);
var playedSeconds = pad(parseInt(mytrack.currentTime%60));
currentTime.innerHTML =playedMinutes + ':' + playedSeconds;
var size = parseInt(mytrack.currentTime*barSize/mytrack.duration);
progressBar.style.width = size + 'px';
}
else {
currentTime.innerHTML = "0.00";
playButton.style.backgroundImage = 'url(https://pp.vk.me/c637617/v637617622/1dd8c/UEl9FgLZ8Uk.jpg)';
progressBar.style.width = '0px';
window.clearInterval(updateTime);
}
}
function clickedBar(e) {
if(!mytrack.ended) {
var mouseX = e.pageX - bar.offsetLeft;
var newtime = mouseX*mytrack.duration/barSize;
mytrack.currentTime = newtime;
progressBar.style.width = mouseX + 'px';
}
}
function pad(d) {
return (d <10) ? '0' + d.toString() : d.toString();
}
Нельзя использовать два одинаковых ID на одной странице, отсюда и ошибка. ID - один, класс - может повторяться.
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Не могу понять почему мои боксы стали такие маленькие (были квардратные)lg в md в xs вставил но всё же криво всё стало
Добрый деньНе могу разобраться в чём причина, может поможете? Вот сайт: http://ipass
У меня есть JSON файл в таком виде {"Name":"wefgew"; "Birthday": "21"; "City": "qefqwef"}Мне нужен такой ajax запросто что бы записывал Имена, Дни, Города в свой span (примерно...