2016-05-15 11 views
0

私は単純なコマンドhttps://github.com/admsev/jquery-play-soundでサウンドを再生する方法がありますが、再生中のオーディオファイルの長さは約2分です。私は、javascriptまたはjqueryコマンドでオーディオを停止/消音する方法が必要です。誰も私がこれをどうやってできるか知っていますか?サウンドを停止する以外にも他のことを行うことができる通常のHTMLボタンでない限り、サウンドを停止するボタンは本当に必要ありません。JSとJQueryでサウンドを再生/停止する

答えて

1

リンクした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(); 
+0

backgroundMusic.play()私は、VARに().playを入れなければならないだろうか、私は何ができますか? – DangerMouse5

+0

はい、 'var backgroundMusic = ...'と 'backgroundMusic.play()'を行うことができます。また、ページの読み込みを開始しないと、ユーザーが再生を押す前に音楽のダウンロードを開始することができます。 –

1

ませjQueryの、ないプラグイン、ブラウザだけ。 1つのMP3を再生して一時停止するボタンです。あなたは1つのボタンに何をしたいかを指定しなかったので、私はその1つの孤独なボタンに余分な機能を追加しませんでした。この1つの孤独なボタンには他にどんなことをしたかったのですか?

ところで、あなたはオーディオではなく、一時停止の停止する場合:

  • は、あなたがコメントを解除する必要が<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>

+0

ライブラリを必要としないときは避けてください。ただし、ブラウザー固有の違いをスムーズにするために、ライブラリが必要になることがあります。 [私が一度に遭遇した違い](https://github.com/roryokane/vetinari-clock-simulator/commit/c19a2e95c0e444a37ddffeda3f412816529dae20)は、Android用のFirefoxでは、サウンドを再び '.play()'することができなかったそれは演奏を停止する。 howler.jsに切り替えると、もちろんライブラリを追加してもページロードが少し遅くなりました。いずれのソリューションでも、必要な機能やサポートしているブラウザによって最適なものになる可能性があります。 –

関連する問題