Как предотвращать груз одного mp3, когда будет размножаться другой в javascript?
У меня есть несколько песен на странице. Я осведомляюсь: как я предотвращаю автоматический груз песен, которые не звучат?
Например с:
<audio id="audio1">
<source src="mp3/ideas/amanece.mp3" type="audio/mpeg" />
</audio>
<audio id="audio2">
<source src="mp3/ideas/otro.mp3" type="audio/mpeg" />
</audio>
До настоящего времени, мне удалось поместить в паузу предыдущих, но меня загрузило воспроизведение всех песен. Мне случилось помещать audio1.src=""; когда play в audio2, но я не могу использовать это, таким образом.
// en la función siguiente hago que cuando una canción se reproduzca y se pulse en otra canción
// se deje de reproducir la anterior (para limitar la reproducción a la vez de una sola canción)
var audios;
document.addEventListener('play', function(e)
{
var audios = document.getElementsByTagName('audio');
for(var i = 0, len = audios.length; i < len;i++)
{
if(audios[i] != e.target)
{
audios[i].pause();
//audios[i].src = ""; //por ejemplo aquí no lo puedo usar
}
}
}, true);
Я использую код приятеля Эррор404, но делаю призыв к функции со значка "play" из каждой песни не с этикеток аудио...
function play(id)
{
var audio = document.getElementById(id);
if (id == "audio1")
{
document.getElementById("audio1").src = "mp3/ideas/amanece.mp3";
document.getElementById("audio2").src = "";
document.getElementById("audio3").src = "";
document.getElementById("audio4").src = "";
document.getElementById("audio5").src = "";
document.getElementById("audio6").src = "";
document.getElementById("audio7").src = "";
}
if (id == "audio2")
{
document.getElementById("audio1").src = "";
document.getElementById("audio2").src = "mp3/ideas/escupitajo.mp3";
document.getElementById("audio3").src = "";
document.getElementById("audio4").src = "";
document.getElementById("audio5").src = "";
document.getElementById("audio6").src = "";
document.getElementById("audio7").src = "";
}
else
{
// document.getElementById("audio1").src = "";
}
}
<img id="idplay1" class="play" data-audio="1" data-img="1" src="images/play.png" onclick="play('audio1')">
и функционируй, я предотвращаю груз песни, которая звучала (когда я кликаю в ней, снова он начинает воспроизводить с 0) но не могу прерывать воспроизведение песни.
tag audio HTML5 обладай так называемым признаком preload, который, если он установлен как none, он избежит того, чтобы файл был загружен автоматически. Только он будет загружен, когда пользователь сделает click на том же самом.
<audio preload="none" controls>
<source src="//www.w3schools.com/html/horse.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>Первое ты не можешь использовать идентификацию в более чем одном элементе, так как как его собственное имя показывает, они отождествляющие и представляют ни в один элемент. В Вашем недостатке ты был бы должен использовать класс.
<audio class="audio" id="audio1" onclick="play("audio1")>
<source src="mp3/ideas/amanece.mp3" type="audio/mpeg" />
</audio>
<audio class="audio" id="audio2" onclick="play("audio2")>
<source src="mp3/ideas/amanece.mp3" type="audio/mpeg" />
</audio>
Однажды сделанный это, мы можем создавать функцию для, когда мы дадим каждому из audios click происходя с ним как параметр, она пойдите того же самого (который clickemos):
function play(id){
var audio = document.getElementById(id);
if (id == "audio1"){
document.getElementById("audio2").src = "";
}else{
document.getElementById("audio1").src = "";
}
}
Сохраняй src в персонализированном свойстве, чтобы мочь возвращать ее, отложив src.
Как в отлаживать src, Ваша стоимость переходит к тому, чтобы быть настоящим url (не porqué), чтобы знать, есть ли у аудио "пустой" src, сравни это с "", если он "новый" и с location.href, если он был "отложен".
Что-то похожее на это: (если ты нажимаешь на того, который звучит, он это прерывает)
function play(id){
var elementosAudio=document.getElementsByTagName("AUDIO");
for (let i=0; i<elementosAudio.length; i++)
if (elementosAudio[i].id!=id) elementosAudio[i].src = "";
else if (elementosAudio[i].paused) {
if (elementosAudio[i].src=="" || elementosAudio[i].src==location.href)
elementosAudio[i].src=elementosAudio[i].getAttribute('data-src');
elementosAudio[i].play();
}
else elementosAudio[i].pause();
}<button onclick="play('audio1')">Audio 1</button>
<button onclick="play('audio2')">Audio 2</button>
<AUDIO id="audio1" data-src="http://k002.kiwi6.com/hotlink/qp7vm37342/Afrim_rique.mp3"></AUDIO>
<AUDIO id="audio2" data-src="http://k007.kiwi6.com/hotlink/5ntn5xh2vc/Au-dessus_des_nuages.mp3"></AUDIO>Bonus track:
Если тебе не хочется, что, распределив "" в src, вышло объявление в консоли, ты можешь заменять объект новым другим, копируя ему признаки. Что-то похожее на это:
function play(id){
var elementosAudio=document.getElementsByTagName("AUDIO");
for (let i=0; i<elementosAudio.length; i++)
if (elementosAudio[i].id!=id && elementosAudio[i].src!="") {
let audio=document.createElement("AUDIO");
audio.id=elementosAudio[i].id;
audio.setAttribute('data-src',elementosAudio[i].getAttribute('data-src'));
elementosAudio[i].parentNode.replaceChild(audio,elementosAudio[i]);
}
else if (elementosAudio[i].id==id)
if (elementosAudio[i].paused) {
if (elementosAudio[i].src=="")
elementosAudio[i].src=elementosAudio[i].getAttribute('data-src');
elementosAudio[i].play();
}
else elementosAudio[i].pause();
}<button onclick="play('audio1')">Audio 1</button>
<button onclick="play('audio2')">Audio 2</button>
<AUDIO id="audio1" data-src="http://k002.kiwi6.com/hotlink/qp7vm37342/Afrim_rique.mp3"></AUDIO>
<AUDIO id="audio2" data-src="http://k007.kiwi6.com/hotlink/5ntn5xh2vc/Au-dessus_des_nuages.mp3"></AUDIO>