单击无法停止音频

Question

我在单击时停止音频播放器时遇到问题。播放器成功启动，但再次单击时无法停止。你能帮我吗？这是一个代码：

$(".portfolio-listen").click(function(e) {
  e.preventDefault();
  var audioUrl = $(this).attr("href");
  var audioElement = document.createElement("audio");
  audioElement.setAttribute('src', audioUrl);
  $(this).toggleClass("playing");

  if ($(this).hasClass("playing")) {
    audioElement.play();
  } else {
    audioElement.pause();
  }


});

Answer 1

如果您希望根据单击的按钮加载新的音频源，但要使音频元素成为全局元素并检查它是否已定义，然后继续切换音频，则此示例可能会变得更复杂 play/pause。

// for demo purpose, use var audioUrl = $(this).href('href')
var audioUrl = 'https://allthingsaudio.wikispaces.com/file/view/Shuffle%20for%20K.M.mp3/139190697/Shuffle%20for%20K.M.mp3';

// Make audioElement global
var audioElement;


$(".portfolio-listen").click(function(e) {

  e.preventDefault();
 
  if(!audioElement){
      audioElement = document.createElement("audio");
      audioElement.setAttribute('src', audioUrl);
  }
  
  $(this).toggleClass("playing");
  
  if ($(this).hasClass("playing")) {
    audioElement.play();
  } else {
    audioElement.pause();
  }


});

button {
   background: #e91e63;
}
button.playing {
   background: #8bc34a;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<button class="portfolio-listen">Play</button>

单击无法停止音频

Cant stop audio on click

javascript

jquery

html5-audio