Блог

Я работаю над проектом, который требует воспроизведения звука при нажатии на ссылку. Все работает нормально, я использовал приведенный ниже Javascript. Проблема в том, что требуется около 30 секунд (в зависимости от скорости Интернета), прежде чем вы действительно услышите файл, потому что браузер должен его загрузить. Есть ли способ адаптировать приведенный ниже код для отображения индикатора загрузки файла?

 <bgsound id="sound">
<script>
function PlaySound(url) {
  document.all.sound.src = url;
}
</script>
  

и это в качестве ссылки:

 <a href="#" onClick="PlaySound('/Lang/sounds/<?php echo $pid ?>A.wav')">Play</a>
  

Предупреждение о том, что «bgsound» является собственностью Internet Explorer, насколько я знаю. Сказав это, вы можете подписаться на его событие «readystatechage», чтобы узнать, когда загрузка будет завершена …. (непроверено! поскольку у меня нет IE)

 <div id="soundLoading" style="display: none;"><img src="someani.gif" /></div>
<bgsound id="sound">
<script>
function PlaySound(url) {
  // Setup some loading animation here......
  document.all.soundLoading.style.display = "inline";

  // Add event listener and set the sound source
  sound.onreadystatechange = CheckSoundLoaded;
  document.all.sound.src = url;
}

function CheckSoundLoaded() {
  if(document.all.sound.readyState == 4) {
    // sound is loaded, remove loading animation
    document.all.soundLoading.style.display = "none";
  }
}
</script>
  

http://www.highdots.com/forums/javascript/finding-when-bgsound-downloads-47830.html

Простой

Самый простой метод — заменить текст ‘Play’ для ссылки на ‘Loading …’:

 <script type="text/javascript">
    //<![CDATA[
    function PlaySound(url, anchor) {
      anchor.innerHTML = 'Loading...';
      document.all.sound.src = url;
    }
    //]]>
</script>

<a href="#" onClick="PlaySound('/Lang/sounds/<?php echo $pid ?>A.wav', this)">Play</a>
  

Вот демонстрационный JS Fiddle.

Более продвинутый

Другой вариант — заменить текст привязки анимированным gif:

 <script type="text/javascript">
    //<![CDATA[
    function PlaySound(url, anchor) {
      anchor.innerHTML = '<img src="http://www.fordesigner.com/pic/zip/200916124527437778027.gif"/> Loading...';
      document.all.sound.src = url;
    }
    //]]>
</script>

<a href="#" onClick="PlaySound('/Lang/sounds/<?php echo $pid ?>A.wav', this)">Play</a>
  

Вот пример JS Fiddle.