Question

我正在尝试在javascript中构建一个播放/暂停一体化按钮。由aud_play_pause而不是click事件的条件决定。理想情况下，它可以切换到正确的类/文本（audio.play - ＆gt;图标“暂停” - ＆gt;文本“暂停”/ audio.paused - ＆gt;图标“播放” - ＆gt;文本“播放”audio.buffering - ＆gt;文本“加载”）本身不受自动播放功能的影响（以防万一）。是否可以通过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>

在javascript的音频缓冲过程中用“加载”替换文字？

1 个答案: