如何使用 SoundJS 切换 play/pause?
How do I toggle play/pause with SoundJS?
我正在使用 SoundJS 构建伪 MPC。我已经按照我想要的方式对声音套件按钮进行了编程,但是我无法让循环按照我想要的方式工作。
- 我希望用户点击 "loop1" 即可播放。
- 如果用户再次点击 "loop1",它应该停止并重新设置。
- 如果用户在 "loop1" 正在播放时单击 "loop2",则 "loop1" 会在 "loop2" 开始播放时停止并重置。
我怎么能掌握这个问题。警告,我本质上是一名 UI/UX 设计师并且仍在学习 Javascript,所以如果您在解释时能给我更多细节,那就太好了。谢谢!
下面是我的一些代码,但要查看实际效果,请查看此处:http://nowthatsgenius.com/clients/beatbox/
<body onload="init();">
<section class="player-container">
<article class="player-controls">
<ul class="player-controls">
<li class="player-controls-button" id="loop1" onclick="playSound(this)">Loop 1</li>
<li class="player-controls-button" id="loop2" onclick="playSound(this)">Loop 2</li>
</ul>
</article>
</section>
<section class="mpc-container">
<article class="mpc-title mpc-col">
<span class="text">V1</span>
</article>
<article class="mpc-controls mpc-col">
<ul class="mpc-controls-wrap">
<li class="mpc-controls-row">
<ul>
<li class="mpc-controls-button" id="a1" onclick="playSound(this)"></li>
<li class="mpc-controls-button" id="a2" onclick="playSound(this)"></li>
<li class="mpc-controls-button" id="a3" onclick="playSound(this)"></li>
<li class="mpc-controls-button" id="a4" onclick="playSound(this)"></li>
<li class="mpc-controls-button" id="a5" onclick="playSound(this)"></li>
</ul>
<ul>
<li class="mpc-controls-button" id="a6" onclick="playSound(this)"></li>
<li class="mpc-controls-button" id="a7" onclick="playSound(this)"></li>
<li class="mpc-controls-button" id="a8" onclick="playSound(this)"></li>
<li class="mpc-controls-button" id="a9" onclick="playSound(this)"></li>
<li class="mpc-controls-button" id="a10" onclick="playSound(this)"></li>
</ul>
</li>
</ul>
</article>
</section>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="http://code.createjs.com/soundjs-0.6.0.min.js"></script>
<script>
var preload;
function init() {
if (!createjs.Sound.initializeDefaultPlugins()) {
document.getElementById("error").style.display = "block";
document.getElementById("content").style.display = "none";
return;
}
var assetsPath = "assets/";
var sounds = [
{id:"loop1", src:"loop1.mp3"},
{id:"loop2", src:"loop2.mp3"},
{id:"a1", src:"snare.wav"},
{id:"a2", src:"kick1.wav"},
{id:"a3", src:"clap1.wav"},
{id:"a4", src:"closedhat.wav"},
{id:"a5", src:"cymbal.wav"},
{id:"a6", src:"kick2.wav"},
{id:"a7", src:"clap2.wav"},
{id:"a8", src:"openhat.wav"},
{id:"a9", src:"voice1.wav"},
{id:"a10", src:"voice2.wav"},
];
$('.player-controls-button').attr("disabled",true);
createjs.Sound.alternateExtensions = ["mp3"];
createjs.Sound.addEventListener("fileload", createjs.proxy(handleLoadComplete, this));
createjs.Sound.registerSounds(sounds, assetsPath);
}
function playSound(target) {
var instance = createjs.Sound.play(target.id, createjs.Sound.INTERRUPT_NONE);
$(".player-controls-button").click(function(event) {
if (instance.playState == createjs.Sound.PLAY_SUCCEEDED) {
instance.stop();
}
else {
instance.play(target.id, createjs.Sound.INTERRUPT_NONE);
}
});
console.log(instance.playState);
}
</script>
</body>
您可以在开始播放声音后通过将它们分配给变量来修改声音。在这种情况下,我创建了变量 loop1
和 loop2
.
// Creating variables outside playSound() so they exist in the global scope.
var loop1 = null;
var loop2 = null;
function playSound(target) {
if(loop1){ // If loop1 exists, stop it.
loop1.stop();
}
if(loop2){ // If loop2 exists, stop it.
loop2.stop();
}
if(target.id == "loop1"){
// Assign value to var loop1
loop1 = createjs.Sound.play(target.id, createjs.Sound.INTERRUPT_NONE);
}
else if(target.id == "loop2"){
// Assign value to var loop2
loop2 = createjs.Sound.play(target.id, createjs.Sound.INTERRUPT_NONE);
}
else{
// Otherwise, create generic sound
var instance = createjs.Sound.play(target.id, createjs.Sound.INTERRUPT_NONE);
}
$(".player-controls-button").click(function(event) {
if (instance.playState == createjs.Sound.PLAY_SUCCEEDED) {
instance.stop();
}else {
instance.play(target.id, createjs.Sound.INTERRUPT_NONE);
}
});
console.log(instance.playState);
}
我建议您将音效的 playSound(target)
函数分开,并为您的音乐循环创建一个名为 playLoop(target)
的新函数,以使其更易于阅读。但这取决于你。
版本 2
var loop1 = null;
var loop2 = null;
function playLoop(target){
// If loop1 exists, stop it and delete it
if(loop1){
loop1.stop();
loop1 = null;
}else if(target.id == "loop1"){
loop1 = createjs.Sound.play(target.id, createjs.Sound.INTERRUPT_NONE);
}
// If loop2 exists, stop it and delete it
if(loop2){
loop2.stop();
loop2 = null;
}else if(target.id == "loop2"){
loop2 = createjs.Sound.play(target.id, createjs.Sound.INTERRUPT_NONE);
}
}
当您将 createjs.Sound.play() 分配给一个变量时,该变量将成为一个 AbstractSoundInstance
对象。您可以通过许多很酷的方式修改它,here's the documentation 如果您想了解您可以使用这些变量做些什么。
我正在使用 SoundJS 构建伪 MPC。我已经按照我想要的方式对声音套件按钮进行了编程,但是我无法让循环按照我想要的方式工作。
- 我希望用户点击 "loop1" 即可播放。
- 如果用户再次点击 "loop1",它应该停止并重新设置。
- 如果用户在 "loop1" 正在播放时单击 "loop2",则 "loop1" 会在 "loop2" 开始播放时停止并重置。
我怎么能掌握这个问题。警告,我本质上是一名 UI/UX 设计师并且仍在学习 Javascript,所以如果您在解释时能给我更多细节,那就太好了。谢谢!
下面是我的一些代码,但要查看实际效果,请查看此处:http://nowthatsgenius.com/clients/beatbox/
<body onload="init();">
<section class="player-container">
<article class="player-controls">
<ul class="player-controls">
<li class="player-controls-button" id="loop1" onclick="playSound(this)">Loop 1</li>
<li class="player-controls-button" id="loop2" onclick="playSound(this)">Loop 2</li>
</ul>
</article>
</section>
<section class="mpc-container">
<article class="mpc-title mpc-col">
<span class="text">V1</span>
</article>
<article class="mpc-controls mpc-col">
<ul class="mpc-controls-wrap">
<li class="mpc-controls-row">
<ul>
<li class="mpc-controls-button" id="a1" onclick="playSound(this)"></li>
<li class="mpc-controls-button" id="a2" onclick="playSound(this)"></li>
<li class="mpc-controls-button" id="a3" onclick="playSound(this)"></li>
<li class="mpc-controls-button" id="a4" onclick="playSound(this)"></li>
<li class="mpc-controls-button" id="a5" onclick="playSound(this)"></li>
</ul>
<ul>
<li class="mpc-controls-button" id="a6" onclick="playSound(this)"></li>
<li class="mpc-controls-button" id="a7" onclick="playSound(this)"></li>
<li class="mpc-controls-button" id="a8" onclick="playSound(this)"></li>
<li class="mpc-controls-button" id="a9" onclick="playSound(this)"></li>
<li class="mpc-controls-button" id="a10" onclick="playSound(this)"></li>
</ul>
</li>
</ul>
</article>
</section>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="http://code.createjs.com/soundjs-0.6.0.min.js"></script>
<script>
var preload;
function init() {
if (!createjs.Sound.initializeDefaultPlugins()) {
document.getElementById("error").style.display = "block";
document.getElementById("content").style.display = "none";
return;
}
var assetsPath = "assets/";
var sounds = [
{id:"loop1", src:"loop1.mp3"},
{id:"loop2", src:"loop2.mp3"},
{id:"a1", src:"snare.wav"},
{id:"a2", src:"kick1.wav"},
{id:"a3", src:"clap1.wav"},
{id:"a4", src:"closedhat.wav"},
{id:"a5", src:"cymbal.wav"},
{id:"a6", src:"kick2.wav"},
{id:"a7", src:"clap2.wav"},
{id:"a8", src:"openhat.wav"},
{id:"a9", src:"voice1.wav"},
{id:"a10", src:"voice2.wav"},
];
$('.player-controls-button').attr("disabled",true);
createjs.Sound.alternateExtensions = ["mp3"];
createjs.Sound.addEventListener("fileload", createjs.proxy(handleLoadComplete, this));
createjs.Sound.registerSounds(sounds, assetsPath);
}
function playSound(target) {
var instance = createjs.Sound.play(target.id, createjs.Sound.INTERRUPT_NONE);
$(".player-controls-button").click(function(event) {
if (instance.playState == createjs.Sound.PLAY_SUCCEEDED) {
instance.stop();
}
else {
instance.play(target.id, createjs.Sound.INTERRUPT_NONE);
}
});
console.log(instance.playState);
}
</script>
</body>
您可以在开始播放声音后通过将它们分配给变量来修改声音。在这种情况下,我创建了变量 loop1
和 loop2
.
// Creating variables outside playSound() so they exist in the global scope.
var loop1 = null;
var loop2 = null;
function playSound(target) {
if(loop1){ // If loop1 exists, stop it.
loop1.stop();
}
if(loop2){ // If loop2 exists, stop it.
loop2.stop();
}
if(target.id == "loop1"){
// Assign value to var loop1
loop1 = createjs.Sound.play(target.id, createjs.Sound.INTERRUPT_NONE);
}
else if(target.id == "loop2"){
// Assign value to var loop2
loop2 = createjs.Sound.play(target.id, createjs.Sound.INTERRUPT_NONE);
}
else{
// Otherwise, create generic sound
var instance = createjs.Sound.play(target.id, createjs.Sound.INTERRUPT_NONE);
}
$(".player-controls-button").click(function(event) {
if (instance.playState == createjs.Sound.PLAY_SUCCEEDED) {
instance.stop();
}else {
instance.play(target.id, createjs.Sound.INTERRUPT_NONE);
}
});
console.log(instance.playState);
}
我建议您将音效的 playSound(target)
函数分开,并为您的音乐循环创建一个名为 playLoop(target)
的新函数,以使其更易于阅读。但这取决于你。
版本 2
var loop1 = null;
var loop2 = null;
function playLoop(target){
// If loop1 exists, stop it and delete it
if(loop1){
loop1.stop();
loop1 = null;
}else if(target.id == "loop1"){
loop1 = createjs.Sound.play(target.id, createjs.Sound.INTERRUPT_NONE);
}
// If loop2 exists, stop it and delete it
if(loop2){
loop2.stop();
loop2 = null;
}else if(target.id == "loop2"){
loop2 = createjs.Sound.play(target.id, createjs.Sound.INTERRUPT_NONE);
}
}
当您将 createjs.Sound.play() 分配给一个变量时,该变量将成为一个 AbstractSoundInstance
对象。您可以通过许多很酷的方式修改它,here's the documentation 如果您想了解您可以使用这些变量做些什么。