装载指标

时间:2011-06-07 02:59:19

标签: javascript html audio onclick

我正在开发一个项目,当点击链接时需要播放声音。一切正常,我使用下面的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>

2 个答案:

答案 0 :(得分:2)

简单

最简单的方法是将链接的“播放”文本替换为“正在加载...”:

<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>

这是demo 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>

这是example JS Fiddle

答案 1 :(得分:2)

据我所知,预警“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