使用JavaScript播放/暫停MP3問題

Question

我在暫停正在播放的mp3時遇到問題。

例如，如果我運行如下函數：playSong(drake);它會從我的if語句的第一部分開始運行代碼，它將播放「drake」對象中的MP3並設置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

你應該有2個獨立的功能。一個用於創建音頻元素，另一個用於播放/暫停給定的音頻元素。

你的問題之一是，每次你打電話給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屬性，如果播放器已暫停，則返回true。如果您確實需要單獨的變量，則應將其作爲新屬性.isPlaying存儲在Drake對象中。

https://jsfiddle.net/5k38da10/

Answer 2

移動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>

參考小提琴：http://jsfiddle.net/jm6ky/2/

更新小提琴：http://jsfiddle.net/c6jgjewg/2/

Answer 3

你應該保存您在音頻對象的像這樣的基礎對象

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

而且使用object.song代替宋變量

可以用戶object.song.paused(boolean)或知道歌曲暫停不和再次啓動的歌曲。