單擊圖像時Javascript暫停聲音

Question

我正在使用在加載圖像后播放聲音的代碼（我將其用作音樂播放器上的播放按鈕）。 但是我有一個問題，單擊圖像（播放按鈕）時您無法停止聲音。 因此，您知道如何使用此代碼，因此單擊圖像時聲音會暫停。

我的代碼：

 <script type="text/javascript">
  //Create new function that will update the image source on click.
  function updateImage(el, soundfile) {
      //Determine if music is playing or paused then adjust image 
  source accordingly.
      if(soundfile.mp3.paused) {
          el.src = 

      "imageurl.com";
      } else {
          el.src = "secondimageurl.com";
      }
  };

  function playSound(el,soundfile) {
      if (el.mp3) {
          if(el.mp3.paused) el.mp3.play();
          else el.mp3.pause();
      } else {
          el.mp3 = new Audio(soundfile);
          el.mp3.play();
      }
      //Call new function made whenever the sound is toggled.
      updateImage(document.getElementById("Bottom-1"), el);
  };
   </script>
 <body onload="playSound(this, 'soundsource.mp3');">

 <img src="buttonimage.html" name="Bottom-1" width="50" height="45" 
 border="0" id="Bottom-1"/>
</span>
</body>

Answer 1

使用SoundPlayer.js 。

// Initialize
const player = new SoundPlayer();

// Load the sound
const sound = player.load('Sound.mp3');

// Play the sound
sound.play();

// load & play in one line
const sound = player.load('Sound.mp3').play();

並綁定圖像onclick事件

image.onclick = function () {

    sound[ sound.isPlaying ? 'pause' : 'play' ]();
    image.src = sound.isPlaying ? 'isPlaying.jpg' : 'isPaused.jpg';

}

完整的提琴： https : //jsfiddle.net/GustavGenberg/dxgph924/

單擊圖像時Javascript暫停聲音

問題描述

1 個解決方案

解決方案1
0 2018-02-01 09:52:32

單擊圖像時Javascript暫停聲音

問題描述

1 個解決方案

解決方案1 0 2018-02-01 09:52:32

解決方案1
0 2018-02-01 09:52:32