playing/pausing MP3 JavaScript 问题

Question

我在暂停当前播放的 mp3 时遇到问题。

举个例子，如果我运行我的函数是这样的： playSong(drake); 它开始运行从我的 if 语句的第一部分开始代码，它正在播放 MP3从 "drake" 对象中取出并设置 songValue=2 问题是，如果我第二次运行它不会暂停歌曲，但我的 console.log 显示在控制台中，所以它肯定运行是我的 if 的第二部分当我第二次点击它时的声明，但由于某些原因它没有暂停歌曲。

//object with mp3 audio
var drake = {
    value: 3,
    name: 'Energy',
    artist: 'Drake',
    audio: 'energy.mp3', //
    img: '<img style="width: 50%; margin-right: 25%; margin-left: 25%; margin-top: 10%;" src="http://www.getrichrapping.com/wp-content/uploads/2015/08/Drake-Energy.jpg">'
};


songValue = 1;

// plays and SHOULD pause a Song
function playSong(object) {
    var Song = new Audio(object.audio);

    //plays the song 
    if (songValue == 1) {

        Song.play();
        songValue = 2;

        // SHOULD pause the song when the functions is runned the second time
    } else if (songValue == 2) {
        console.log("Is it working ?"); // String to test if the "else if" gets runned
        Song.pause();
        songValue = 1;

    }
};

Answer 1

将 var Song = new Audio(object.audio) 移到 playSong 之外。

实际上每次调用该函数时都会制作新的音频！

当然，您需要进行更改以引用 object.audio，因为对象不是全局对象。

更好的方法是这样做：

//object with mp3 audio
var drake = {
  value: 3,
  name: 'Energy',
  artist: 'Drake',
  audio: 'https://www.w3schools.com/html/horse.mp3', //
  img: '<img style="width: 50%; margin-right: 25%; margin-left: 25%; margin-top: 10%;" src="http://www.getrichrapping.com/wp-content/uploads/2015/08/Drake-Energy.jpg">'
};


songValue = 1;

// plays and SHOULD pause a Song
function playSong(object) {

  //plays the song 
  if (songValue == 1) {
    var player = document.getElementById('song');
    var sourceMp3 = document.getElementById('sourceMp3');

    sourceMp3.src = object.audio;

    player.load(); //just start buffering (preload)
    player.play(); //start playing

    songValue = 2;

    // SHOULD pause the song when the functions is runned the second time
  } else if (songValue == 2) {
    console.log("Is it working ?"); // String to test if the "else if" gets runned
    var player = document.getElementById('song');

    if (!player.paused)
      player.pause();
    songValue = 1;

  }
};

<audio id="song" controls="controls">
  <source id="sourceMp3" src="" type="audio/mp3" />
  Your browser does not support the audio element.
</audio>

<p>
  <button onclick='playSong(drake)'> Play Song </button>
</p>

引用fiddle：http://jsfiddle.net/jm6ky/2/

已更新 fiddle：http://jsfiddle.net/c6jgjewg/2/

Answer 2

您应该像这样将 Audio 对象存储在您的基础对象中

if (object.song == undefined){
    object.song = new Audio(object.audio);
}

并使用 object.song 而不是 Song 变量

您可以使用 object.song.paused(boolean) 来了解歌曲是否暂停并重新播放歌曲。

Answer 3

您应该有 2 个独立的函数。一种用于创建音频元素，另一种用于 playing/pausing 给定的音频元素。

您的问题之一是每次调用 playSong() 时，您都在创建一个全新的音频元素。

解决方案

var drake = {
    value: 3,
    name: 'Energy',
    artist: 'Drake',
    audio: 'energy.mp3', //
    img: '<img style="width: 50%; margin-right: 25%; margin-left: 25%; margin-top: 10%;" src="http://www.getrichrapping.com/wp-content/uploads/2015/08/Drake-Energy.jpg">'
};

var audioElement = playSong(drake); // load song and play it

togglePlayPause(audioElement); // pause song

function playSong(object) {
    var Song = new Audio(object.audio);
    Song.play();

    return Song;
}

function togglePlayPause(audioElement) {
    if (audioElement.paused) {
        audioElement.play();
    } else {
        audioElement.pause();
    }
}

您首先使用 playSong() 函数创建音频元素并将其存储在变量中。然后将音频元素传递给 togglePlayPause() 以切换其播放状态。

在示例中，我正在播放歌曲，然后立即调用 togglePlayPause() 再次暂停。

此外，您不需要将播放状态保存在单独的变量中。我刚刚在音频元素上使用了 .paused 属性，如果播放器已暂停，则 returns 为真。如果你真的需要一个单独的变量，你应该将它作为一个新的属性 .isPlaying.

存储在 drake 对象中

https://jsfiddle.net/5k38da10/

playing/pausing MP3 JavaScript 问题

playing/pausing MP3 with JavaScript Issue

javascript

html

audio

mp3