2017-04-15 106 views
0

所以,我是一個完整的業餘編程,但我仍然喜歡擺弄它。 我目前正在研究一個基於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代碼從文件夾自動獲取音頻文件到前端,這可能是不必要的信息。

+0

你有沒有考慮使用[網絡音頻API(https://developer.mozilla.org/en/docs/Web/API/Web_Audio_API)? –

+0

@le_m不,我不知道,因爲我甚至不知道任何編碼語言的基礎知識,只是碰巧發現這個已經集成了PHP fetcher的幾乎完整的。 如果有人爲我提供了一種適合我需求的不同類型的球員,當然,我會改變它。 –

回答

1

如果您使用引入了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庫,幫助您在開發過程中。

+0

謝謝!這對我來說很好。不得不稍微調整一下PHP代碼,但至少對我來說很簡單。 –

1

你可以做什麼,是在開始播放新的音頻暫停頁面上的所有可用音頻之前。像這樣的東西。

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>

而不是使用<audio>標籤,你可以使用HTMLAudioElement添加音頻。

0

通過暫停它並將其當前時間設置爲0,您可以stop and reset an audio element。無論何時按下按鈕,您都需要執行此操作。例如:

// 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>

如果你想充分利用Web Audio API的全部力量,你可能會開始建立類似的音板這樣的:

// 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>

請注意,所提供的聲音網址以上必須位於相同的域或在相同的源策略下可用(請參閱CORS標頭)。

0

下面的代碼可以幫助別人:

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; 
      } 
     }); 
    }); 
}); 
相關問題