Question

我有2个音频文件，但是当我触发一个功能时，在这种情况下为'setCurTime37（）'，我确实听到了正确的音频文件（'myAudios1'），但它还会触发下载第二个音频文件（'myAudios2'）。这些只有2个文件，实际上有36个文件，因此下载大量MB。我不明白为什么会这样。

<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) && ((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) && (ya1.currentTime > 0.1)) {
loopCounter = 0;
ya1.playbackRate = document.getElementById("pbr2").value;
ya1.play();
} 
else if ((document.getElementById("precountb").checked==true) && (ya1.currentTime < 0.1)) {
ya1.currentTime = 0;
loopCounter = 0;
ya1.playbackRate = document.getElementById("pbr2").value;
ya1.play();
} 
else if ((document.getElementById("precountb").checked==true) && (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) &&(document.getElementById("precountb").checked==false)){
this.currentTime = 16.20;
this.play();
loopCounter++;
}
else if ((loopCounter < loopLimit) && (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) && ((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) && (ya2.currentTime > 0.1)) {
loopCounter = 0;
ya2.playbackRate = document.getElementById("pbr2").value;
ya2.play();
} 
else if ((document.getElementById("precountb").checked==true) && (ya2.currentTime < 0.1)) {
ya2.currentTime = 0;
loopCounter = 0;
ya2.playbackRate = document.getElementById("pbr2").value;
ya2.play();
} 
else if ((document.getElementById("precountb").checked==true) && (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) &&(document.getElementById("precountb").checked==false)){
this.currentTime = 16.20;
this.play();
loopCounter++;
}
else if ((loopCounter < loopLimit) && (document.getElementById("precountb").checked==true)){
this.currentTime = 16.20;
this.play();
loopCounter++;
}
};
</script>

Answer 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%20Applause-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%20Rate%20Monitor%20Flatline-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_%20Days_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>

单击play（）时不必要地下载多个音频文件

1 个答案: