使用JS和JQuery播放和停止聲音

我有一種簡單的命令播放聲音，https://github.com/admsev/jquery-play-sound，但我播放的音頻文件大約2分鐘長。我需要一種方法來通過javascript或jquery命令來停止/消除音頻。有誰知道我該怎麼做？我真的不想要一個能夠阻止聲音的按鈕，除非它是一個普通的HTML按鈕，除了停止聲音之外，它還可以做其他事情。使用JS和JQuery播放和停止聲音

來源

2016-05-15 DangerMouse5

您鏈接的jQuery playSound庫不支持暫停。我認爲最好選擇一個支持暫停的不同庫，這樣你就不必自己編寫這個功能。

我以前使用howler.js庫，它對我來說工作得很好。這裏是你將如何使用howler.js：

<!-- to load the library on the page --> 
<script src="howler.js">

// to create and play the sound 
var backgroundMusic = new Howl({ 
    urls: ['music.mp3', 'music.ogg'], 
}).play(); 

// to pause the sound 
// (make sure the variable `backgroundMusic` is accessible) 
backgroundMusic.pause(); 

// to stop the sound 
backgroundMusic.stop();

來源

2016-05-15 01:11:18

我將不得不把.play（）在var或我可以做backgroundMusic.play（）？ – DangerMouse5

是的，你可以做'var backgroundMusic = ...'，然後'backgroundMusic.play（）'。如果您在頁面加載時未開始播放，那麼也可以讓您在用戶按下Play之前開始下載音樂。 –

沒有jQuery的，無插件，只是一個瀏覽器。這是播放和暫停一個MP3的一個按鈕。你沒有指定你想要一個按鈕做什麼額外的事情，所以我沒有添加任何額外的功能，只有一個孤獨的按鈕。你想要這個單獨的按鈕做什麼其他的事情？

順便說一句，如果你想在音頻停止，而不是暫停：

有一個在<style>塊，你必須解除和線路進行評論線。
<script>塊中有一行需要取消註釋。

<!doctype html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <style> 
 
    .play:before { 
 
     content: '\25b6'; 
 
    } 
 
    .pause:before { 
 
     content: '\275a\275a'; /*Uncomment this line for pause */ 
 
     /* content: '\25a0'; */ /*Uncomment this line for stop */ 
 
    } 
 
    </style> 
 

 
</head> 
 

 
<body> 
 

 
    <button id="button" class="play"> 
 
    <audio id="audio" src="http://glpjt.s3.amazonaws.com/so/av/pf-righteous.mp3"></audio> 
 
    </button> 
 

 
    <script> 
 
    var audio = document.getElementById('audio'); 
 
    var button = document.getElementById('button'); 
 

 
    button.addEventListener('click', playPause, false); 
 

 
    function playPause() { 
 
     if (!audio.paused) { 
 
     audio.pause(); 
 
     // audio.currentTime = 0; // Uncomment this line for stop 
 
     button.classList.remove('pause'); 
 
     button.classList.add('play'); 
 
     } else { 
 
     audio.play(); 
 
     button.classList.remove('play'); 
 
     button.classList.add('pause'); 
 
     } 
 
    } 
 
    </script> 
 
</body> 
 

 
</html>

來源

2016-05-15 01:31:59 zer00ne

當你不需要它們時避免圖書館是很好的。但是，有時候庫需要平滑瀏覽器特定的差異。 [我曾經遇到的不同之處]（https://github.com/roryokane/vetinari-clock-simulator/commit/c19a2e95c0e444a37ddffeda3f412816529dae20）是，在Android版的Firefox上，你不能'.play（）'後再次發聲它停止播放。切換到howler.js修復 - 雖然當然增加一個庫也使我的頁面加載速度慢一點。兩種解決方案都可能是最好的，具體取決於您需要的功能和您支持的瀏覽器。 –

使用JS和JQuery播放和停止聲音

回答

相關問題