Блог

Главная - Вопросы по программированию - ненужная загрузка нескольких аудиофайлов при нажатии play()

ненужная загрузка нескольких аудиофайлов при нажатии play()

#javascript #html #audio #html5-audio

#javascript #HTML #Аудио #html5-аудио

Вопрос:

У меня есть 2 аудиофайла, но когда я запускаю одну функцию, в данном случае ‘setCurTime37()’, я слышу правильный аудиофайл (‘myAudios1’), но это также запускает загрузку второго аудиофайла (‘myAudios2’). Это всего лишь 2 файла, на самом деле их 36, поэтому для загрузки требуется много МБ. Я не могу понять, почему это происходит.

 <script>
var x = document.getElementById("mymenub").selectedIndex;
var ya1 = document.getElementById("myAudios1");
var loopLimit = document.getElementsByTagName("option")[x].value;
var loopCounter = 0;
ya1.preload = "none"; 

function setCurTime37() {
if ((document.getElementById("precountb").checked==false) amp;amp; ((ya1.currentTime < 0.1) || (document.getElementById("myAudios1").ended==true))) {
ya1.currentTime = 16.20;
loopCounter = 0;
ya1.playbackRate = document.getElementById("pbr2").value;
ya1.play();
} 
else if ((document.getElementById("precountb").checked==false) amp;amp; (ya1.currentTime > 0.1)) {
loopCounter = 0;
ya1.playbackRate = document.getElementById("pbr2").value;
ya1.play();
} 
else if ((document.getElementById("precountb").checked==true) amp;amp; (ya1.currentTime < 0.1)) {
ya1.currentTime = 0;
loopCounter = 0;
ya1.playbackRate = document.getElementById("pbr2").value;
ya1.play();
} 
else if ((document.getElementById("precountb").checked==true) amp;amp; (ya1.currentTime > 0.1)) {
loopCounter = 0;
ya1.playbackRate = document.getElementById("pbr2").value;
ya1.play();
} 
}

document.getElementById("Pause_sb").addEventListener("click", xx37);
function xx37() {
ya1.pause();
}

document.getElementById("Stop_sb").addEventListener("click", zz37);
function zz37() {
ya1.load();
}

ya1.onended = function() {
var x = document.getElementById("mymenub"); loopLimit = parseFloat(x.options[x.selectedIndex].value, 10); 
if ((loopCounter < loopLimit) amp;amp;(document.getElementById("precountb").checked==false)){
this.currentTime = 16.20;
this.play();
loopCounter  ;
}
else if ((loopCounter < loopLimit) amp;amp; (document.getElementById("precountb").checked==true)){
this.currentTime = 16.20;
this.play();
loopCounter  ;
}
};

</script>


<script>
var x = document.getElementById("mymenub").selectedIndex;
var ya2 = document.getElementById("myAudios2");
var loopLimit = document.getElementsByTagName("option")[x].value;
var loopCounter = 0;
ya2.preload = "none"; 

function setCurTime38() {
if ((document.getElementById("precountb").checked==false) amp;amp; ((ya2.currentTime < 0.1) || (document.getElementById("myAudios2").ended==true))) {
ya2.currentTime = 16.20;
loopCounter = 0;
ya2.playbackRate = document.getElementById("pbr2").value;
ya2.play();
} 
else if ((document.getElementById("precountb").checked==false) amp;amp; (ya2.currentTime > 0.1)) {
loopCounter = 0;
ya2.playbackRate = document.getElementById("pbr2").value;
ya2.play();
} 
else if ((document.getElementById("precountb").checked==true) amp;amp; (ya2.currentTime < 0.1)) {
ya2.currentTime = 0;
loopCounter = 0;
ya2.playbackRate = document.getElementById("pbr2").value;
ya2.play();
} 
else if ((document.getElementById("precountb").checked==true) amp;amp; (ya2.currentTime > 0.1)) {
loopCounter = 0;
ya2.playbackRate = document.getElementById("pbr2").value;
ya2.play();
} 
}

document.getElementById("Pause_sb").addEventListener("click", xx38);
function xx38() {
ya2.pause();
}

document.getElementById("Stop_sb").addEventListener("click", zz38);
function zz38() {
ya2.load();
}

ya2.onended = function() {
var x = document.getElementById("mymenub"); loopLimit = parseFloat(x.options[x.selectedIndex].value, 10); 
if ((loopCounter < loopLimit) amp;amp;(document.getElementById("precountb").checked==false)){
this.currentTime = 16.20;
this.play();
loopCounter  ;
}
else if ((loopCounter < loopLimit) amp;amp; (document.getElementById("precountb").checked==true)){
this.currentTime = 16.20;
this.play();
loopCounter  ;
}
};
</script>

Комментарии:

1. Не могли бы вы, пожалуйста, включить соответствующий, HTML чтобы я мог создать демонстрацию того, с чем вы работаете, это поможет мне и другим найти решение без необходимости угадывать структуру вашего HTML . Спасибо.

Ответ №1:

Не загружайте вообще никаких аудиофайлов. Используйте список воспроизведения ссылок.

 // Collect all links into NodeList convert to Array
var linx = Array.from(document.links);

// On each iteration add the click event to each link
for (let i = 0; i < linx.length; i  ) {
  linx[i].onclick = playlist;
}

// playlist() function -- pass Event Object
function playlist(event) {
  // reference Audio tag
  var player = document.getElementById('player');
  // Get the url of the clicked link href
  var file = this.href;
  // Set Audio src to url of the clicked link
  player.src = file;
  // Load the Audio tag
  player.load();
  // Play the Audio tag
  player.play();
}  
 * {
  margin: 0;
  padding: 0;
}

:root {
  font: 400 16px/1.3 Verdana;
}

html,
body {
  width: 100%;
  width: 100%;
}

body {
  overflow-x: hidden;
  overflow-y: scroll;
}

audio {
  cursor: pointer;
  width: 450px;
}

#playlist {
  width: 450px;
  background: rgba(111, 111, 111, 0.1);
}

.header {
  outline: 0;
  cursor: pointer;
  padding: 3px 5px;
  margin-bottom: -6px;
  font-size: 1.25rem;
}

.header:hover {
  color: rgba(122, 01, 23, 0.5)
}

dl {
  padding: 8px 4px;
}

dt {
  margin: 8px;
  border-bottom: 3px ridge cyan
}

dt:first-of-type {
  margin-top: 2px
}

dd {
  text-indent: 18px;
}

a {
  color: rgba(0, 11, 111, 0.7)
}

a:hover {
  color: rgba(0, 0, 224, 0.4);
}  
 <audio id='player' src='' controls name='player'></audio>
<details id='playlist'>
  <summary class='header'>Playlist</summary>
  <dl>
    <dt>Sound fX</dt>
    <dd>
      <a href='http://soundbible.com/mp3/chinese-gong-daniel_simon.mp3' target='player'>Gong</a>
    </dd>
    <dd>
      <a href='http://soundbible.com/mp3/Fake Applause-SoundBible.com-1541144825.mp3' target='player'>Applause</a>
    </dd>
    <dd>
      <a href='http://soundbible.com/mp3/thunder_strike_1-Mike_Koenig-739781745.mp3' target='player'>Thunder</a>
    </dd>
    <dd>
      <a href='http://soundbible.com/mp3/Gun_war-MysteryMan229-1208990486.mp3' target='player'>Machine Gun</a>
    </dd>
    <dd>
      <a href='http://soundbible.com/mp3/Heart Rate Monitor Flatline-SoundBible.com-2063567528.mp3' target='player'>Flatline</a>
    </dd>
    <dt>Songs</dt>
    <dd>
      <a href='https://gldrv.s3.amazonaws.com/av/Florence_and_the_Machine-Dog_ Days_are_Over.mp3' target='player'>Dog Days are Over - Florence and the Machine</a>
    </dd>
    <dt>Monologue</dt>
    <dd>
      <a href='https://od.lk/s/NzlfOTEwMzM5OV8/righteous.mp3' target='player'>Ezekiel 25:17 - Samuel L. Jackson - Pulp Fiction</a>
    </dd>
    <dt>Clips</dt>
    <dd>
      <a href='https://od.lk/s/NzlfOTEyMzgyNF8/jerky.mp3' target='player'>Jerky Boys</a>
    </dd>
  </dl>
</details>