javascript - 在javascript的音频缓冲过程中用 "loading"替换文本？

Question

我正在尝试在 javascript 中构建一个播放/暂停一体式按钮。由aud_play_pause的条件决定，而不是点击事件。理想情况下，它可以切换到正确的类/文本(audio.play -> 图标“暂停”-> 文本“暂停”/audio.paused -> 图标“播放”-> 文本“播放” audio.buffering -> 文本“Loading”)本身不受自动播放功能的影响(以防万一)。 javascript在缓冲过程中文本显示“正在加载”是否可能？

请原谅我拙劣的编码技巧，完整的代码在这里jsfinddle link

var audio = new Audio(),
u = 0;
var playlist = new Array('http://www.w3schools.com/htmL/horse.mp3',   'http://sifidesign.com/audio/explosion.mp3');

audio.addEventListener('ended', function () {
u = ++u < playlist.length ? u : 0;
console.log(u)
audio.src = playlist[u];
audio.play();
}, true);


function aud_play_pause() {
if (audio.paused) {
audio.play(); 
$('#play span').text('Pause');
$('#play').removeClass('play').addClass('pause');

 } 
 else {
audio.pause();
$('#play span').text('Play');
$('#play').removeClass('pause').addClass('play');
 }
}

document.querySelector('#play').addEventListener('click', aud_play_pause)

audio.volume = 0.5;
audio.loop = false;
audio.src = playlist[0];

Answer 1

如果您将 jQuery 包含到您的页面中，您的代码将按预期工作。

您经常会看到使用 $() 的 JavaScript 代码。很多时候 $ = jQuery jQuery 是一个 JavaScript 库，它简化了常见的 JS 任务，例如查询 DOM、添加/删除事件等。

var audio = new Audio(),
  u = 0;
var playlist = new Array('http://www.w3schools.com/htmL/horse.mp3', 'http://sifidesign.com/audio/explosion.mp3');

audio.addEventListener('ended', function() {
  u = ++u < playlist.length ? u : 0;
  console.log(u)
  audio.src = playlist[u];
  audio.play();
}, true);


function aud_play_pause() {
  if (audio.paused) {
    audio.play();
    $('#play span').text('Pause');
    $('#play').removeClass('play').addClass('pause');

  } else {
    audio.pause();
    $('#play span').text('Play');
    $('#play').removeClass('pause').addClass('play');
  }
}

document.querySelector('#play').addEventListener('click', aud_play_pause)

audio.volume = 0.5;
audio.loop = false;
audio.src = playlist[0];

a.button3 {
  font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif !important;
  font-size: 12px;
  font-weight: bolder;
  color: white;
  background: rgba(0, 0, 0, 0.376) none repeat scroll 0 0;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 2px;
  color: #ffffff;
  cursor: pointer;
  font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif !important;
  font-style: normal;
  font-weight: 700;
  height: 11px;
  letter-spacing: 0;
  line-height: 90%;
  padding: 4px 5px 3px;
  position: fixed;
  left: 197px;
  text-decoration: none;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.15);
  top: 2px;
  z-index: 5000;
}
a.button3:hover {
  font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif !important;
  font-size: 12px;
  font-weight: bolder;
  color: white;
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0.34);
}
a.button3.icon {
  padding-left: 2px;
}
a.button3.icon span {
  padding-left: 20px;
  background: url('http://static.tumblr.com/g7ueics/Mhfojxle8/vert-sprites2.png') no-repeat;
  width: 15px;
  height: 15px;
}
a.button3.play span {
  background-position: -5px -5px;
}
a.button3.pause span {
  background-position: -5px -61px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="button3 icon play" id="play" href="#"><span>Play</span></a>