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代码从文件夹自动获取音频文件到前端,这可能是不必要的信息。
如果您使用引入了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库,帮助您在开发过程中。
谢谢!这对我来说很好。不得不稍微调整一下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>
而不是使用<audio>
标签,你可以使用HTMLAudioElement添加音频。
通过暂停它并将其当前时间设置为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标头)。
下面的代码可以帮助别人:
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;
}
});
});
});
你有没有考虑使用[网络音频API(https://developer.mozilla.org/en/docs/Web/API/Web_Audio_API)? –
@le_m不,我不知道,因为我甚至不知道任何编码语言的基础知识,只是碰巧发现这个已经集成了PHP fetcher的几乎完整的。 如果有人为我提供了一种适合我需求的不同类型的球员,当然,我会改变它。 –