別の時に音が出るのを止めるためのJavaScript

コーディングに関しては完璧なアマチュアですが、私はまだそれを手掛けています。私は現在、html/jS/PHPベースのサウンドボードで作業しています。別のサウンドボードを再生するためにボタンを押しても、サウンドが再生されないようにする方法はわかりません。別の時に音が出るのを止めるためのJavaScript

<script type="text/javascript" charset="utf-8"> 
     $(function() { 
      $("audio").removeAttr("controls").each(function(i, audioElement) { 
       var audio = $(this); 
       var that = this; //closure to keep reference to current audio tag 
       $("#doc").append($('<button>'+audio.attr("title")+'</button>').click(function() { 
        that.play(); 
       })); 
      }); 
     }); 
    </script>

誰かがそれを理解してくれることを願っています。前もって感謝します。フォルダからフロントエンドにオーディオファイルを自動的に取得するPHPコードもあります。おそらくこの問題のための不必要な情報です。

出典

2017-04-15 Niko Piiroinen

あなたは[ウェブオーディオAPI]（https://developer.mozilla.org/en/docs/Web/API/Web_Audio_API）を使用して考えがありますか？ –

@le_mいいえ、私は実際にコーディング言語の基本を知らないので、PHPのフェッチャーがすでに組み込まれているこのほぼ完全なものを見つけました。誰かが私のニーズに合った異種のプレーヤーを私に提供していたら、私はそれを変更します。 –

HTMLAudioElementを導入したHTML5を使用する場合、これはあまり難しくありません。ここで

は何をしようとするための最小限のコードです：

// Let's create a soundboard module ("sb") 
 
var sb = { 
 
    song: null, 
 
    init: function() { 
 
    sb.song = new Audio(); 
 
    sb.listeners(); 
 
    }, 
 
    listeners: function() { 
 
    $("button").click(sb.play); 
 
    }, 
 
    play: function (e) { 
 
    sb.song.src = e.target.value; 
 
    sb.song.play(); 
 
    } 
 
}; 
 

 
$(document).ready(sb.init);

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Audio</title> 
 
</head> 
 
<body> 
 
    <button value="https://www.gnu.org/music/FreeSWSong.ogg">Song #1</button> 
 
    <button value="https://www.gnu.org/music/free-software-song-herzog.ogg">Song #2</button> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
</body> 
 
</html>

ます。また、開発プロセスであなたを助けるためにhowler.jsのようなライブラリを考慮することができます。

出典

2017-04-15 21:43:59 Badacadabra

ありがとう！これは私のためにうまくいった。ちょっとでもちょっとでもPHPコードを微調整しなければならず、それは私のためには簡単だった。 –

あなたができることは、新しいオーディオを再生する前に、ページ上で利用可能なすべてのオーディオを一時停止することです。このようなもの。

var audioOne = document.querySelector('#audio-1'); 
 
var audioTwo = document.querySelector('#audio-2'); 
 

 
var allAudios = document.querySelectorAll('audio'); 
 

 
function stopAllAudio(){ 
 
\t allAudios.forEach(function(audio){ 
 
\t \t audio.pause(); 
 
\t }); 
 
} 
 

 
document.querySelector('#play-1').addEventListener('click', function(){ 
 
\t stopAllAudio(); 
 
\t audioOne.play(); 
 
}) 
 
document.querySelector('#play-2').addEventListener('click', function(){ 
 
\t stopAllAudio(); 
 
\t audioTwo.play(); 
 
})

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
<audio id="audio-1" 
 
    src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg"> 
 
</audio> 
 
<audio id="audio-2" 
 
    src="http://www.w3schools.com/html/horse.mp3"> 
 
</audio> 
 

 
\t <button id="play-1"> 
 
\t \t play audio 1 
 
\t </button> 
 
\t <button id="play-2"> 
 
\t \t play audio 2 
 
\t </button> \t 
 
</body> 
 
</html>

の代わりにあなたがHTMLAudioElementを使用することができ<audio>タグを使用してオーディオを追加します。

出典

2017-04-15 21:46:22 azs06

stop and reset an audio elementこれを一時停止し、現在の時刻を0に設定することで可能です。ボタンをクリックするたびにこれを行う必要があります。例：あなたはWeb Audio APIのフルパワーを活用したい場合には

// Available sounds: 
 
const sounds = { 
 
    "Bottle": "http://freewavesamples.com/files/Bottle.wav", 
 
    "Bamboo": "http://freewavesamples.com/files/Bamboo.wav" 
 
} 
 

 
// Load audio elements: 
 
let audios = {}; 
 
for (let [title, url] of Object.entries(sounds)) { 
 
    audios[title] = new Audio(url); 
 
} 
 

 
// Create board buttons: 
 
let board = document.getElementById("board"); 
 
for (let title of Object.keys(audios)) { 
 
    let button = document.createElement("button"); 
 
    button.textContent = title; 
 
    button.dataset["audio"] = title; 
 
    board.appendChild(button); 
 
} 
 

 
// Handle board button clicks: 
 
board.addEventListener("click", function(event) { 
 
    let audio = audios[event.target.dataset["audio"]]; 
 
    if (audio) { 
 
    // Pause and reset all audio elements: 
 
    for (let audio of Object.values(audios)) { 
 
     audio.pause(); 
 
     audio.currentTime = 0; 
 
    } 
 
    // Play this audio element: 
 
    audio.play(); 
 
    } 
 
});

<div id="board"></div>

は、あなたはおそらくこれに類似したあなたの響板の構築を開始します：

// Load buffer from 'url' calling 'cb' on complete: 
 
function loadBuffer(url, cb) { 
 
    var request = new XMLHttpRequest(); 
 
    request.open('GET', url); 
 
    request.responseType = 'arraybuffer'; 
 
    request.onload =() => context.decodeAudioData(request.response, cb); 
 
    request.send(); 
 
} 
 

 
// Available sounds: 
 
const sounds = { 
 
    "Bottle": "url/to/bottle.wav", 
 
    "Bamboo": "url/to/bamboo.wav" 
 
}; 
 

 
let audioCtx = new (AudioContext || webkitAudioContext)(), 
 
    board = document.getElementById("soundboard"), 
 
    buffers = {}, 
 
    source; 
 

 
// Load buffers: 
 
for (let [title, url] of Object.entries(sounds)) { 
 
    loadBuffer(url, buffer => buffers[title] = buffer); 
 
} 
 

 
// Create board buttons: 
 
for (let title of Object.keys(sounds)) { 
 
    let button = document.createElement("button"); 
 
    button.textContent = title; 
 
    button.dataset["buffer"] = title; 
 
    board.appendChild(button); 
 
} 
 

 
// Handle board button clicks: 
 
board.addEventListener("click", function(event) { 
 
    let buffer = buffers[event.target.dataset["buffer"]]; 
 
    if (buffer) { 
 
    if (source) source.stop(); 
 
    source = audioCtx.createBufferSource(); 
 
    source.buffer = buffer; 
 
    source.connect(audioCtx.destination); 
 
    source.start(); 
 
    } 
 
});

<div id="soundboard"></div>

指定されたサウンドURL同じドメインにあるか、同じ発信元ポリシー（CORSヘッダーを参照）の下で利用可能である必要があります。コードの下

出典

2017-04-15 22:23:18

他の人に役立つことがあります。

var audioMap = new Map(); 
var rappers = document.querySelectorAll('.rapper'); 
rappers.forEach(function(rapper){ 
    audioMap.set(rapper, new Audio()); 
    rapper.addEventListener('click', function(){ 
     var audio = new Audio($(this).data('audio')); 
     audio.play(); 
     audioMap.set(this, audio); 
     var current = audioMap.get(this); 
     // console.log('get', current); 
     audioMap.forEach(function(audio){ 
      if(audio != current){ 
       audio.pause(); 
       audio.currentTime = 0; 
      } 
     }); 
    }); 
});

出典

2017-10-16 06:39:48

別の時に音が出るのを止めるためのJavaScript

答えて

関連する問題