У меня есть несколько песен на странице. Я осведомляюсь: как я предотвращаю автоматический груз песен, которые не звучат?
Например с:
<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>