[英]Conditional checkbox action for Tone.js (Web Audio)
I'm trying to create a checkbox ( $('#button')
) the action of which changes depending on the state of player
(whether the audio is playing or not) using Tone.js and jQuery. 我正在尝试使用Tone.js和jQuery创建一个复选框(
$('#button')
),该复选框的作用取决于player
的状态(是否player
音频)。
So, the logic is that if the audio is already started
, then the action of the checkbox is simply to mute
(or unmute) the audio. 因此,逻辑是,如果音频已经
started
,则复选框的作用仅仅是使音频mute
(或取消静音)。 However, if the audio is not already started
then I want the checkbox to start
player
(with the default player.mute == false
) and change its own action to mute
/unmuting. 然而,如果音频尚未
started
,然后我想的复选框, start
player
(默认player.mute == false
),并改变自己的行动, mute
/取消忽略。 This will mean that, once the player.state == started
you cannot change it , only toggle whether it is muted
or not. 这意味着,一旦
player.state == started
您将无法更改它,而只能切换是否muted
。
I've managed to get a function together that toggles the state
or the mute
value, but not one where the action of the checkbox itself is conditioned by the state
. 我已经得到了一个功能在一起切换的
state
或 mute
值,而不是一个地方的复选框本身的动作是由调节state
。 The code I have below is my attempt at this but it doesn't seem to work ☹️ – any help would be really appreciated. 我下面的代码是我对此的尝试,但似乎不起作用☹️–任何帮助将不胜感激。
const button = $('#button');
if(player.state == 'started') {
$(button).attr('checked', true);
} else if(player.state == 'stopped') {
$(button).attr('checked', false);
}
if(player.state == 'started') {
$(button).change(function(){
if(player.mute == true) {
player.mute == false;
$(this).attr('checked', true);
} else if(player.mute == false) {
player.mute == true;
$(this).attr('checked', false);
}
});
} else if(player.state == 'stopped') {
$(button).change(function(){
player.start();
$(this).attr('checked', true);
});
}
Just for context: This is all because whether autoplay is allowed or not varies between browsers. 仅出于上下文考虑:这是所有浏览器之间是否允许自动播放都不同的原因。 In some an autoplay function I have earlier in the script means that the
player
begins on the page load (👍🏼), in others an explicit user action is required (👎🏼). 在某些我之前在脚本中拥有的自动播放功能中,这意味着
player
从页面加载开始(in),而在另一些情况下,则需要显式的用户操作(👎🏼)。
What i understood is, the desired behavior is as follows:- 我了解的是,所需的行为如下:
Whenever the player.state === 'started' Clicking on the button should mute the audio and again clicking on it should unmute the audio. 每当player.state ==='started'时,单击按钮应使音频静音,再次单击应使音频静音。 and keep on toggling till the player.state === 'started' If player.state === 'stopped', clicking on button should start the audio and then keepo toggling the mute/unmute till the player is in started state.
并继续切换直到播放器。状态==='开始'如果播放器。状态==='停止',则单击按钮应启动音频,然后继续切换静音/取消静音,直到播放器处于开始状态。
Below is the implementation of the same. 下面是相同的实现。 const button = $('#button');
const button = $('#button');
//First set the button state to checked on unchecked depending on state
if(player.state == 'started') {
button.attr('checked', true); //this means now the player is playing musing and is unmute.
} else if(player.state == 'stopped') {
button.attr('checked', false); //this means now the player is stopped and is also mute
}
button.change(function(){
if(player.state === 'started') {
if(player.mute) {
player.mute = false;
button.attr('checked', false);
} else {
player.mute = true;
$(this).attr('checked', true);
}
} else if (player.state === 'stopped') { //button was clicked and player is in stopped state. so start the player and turn on the checkbox so it displays that it is playing and is unmute
player.start();
button.attr('checked', true);
}
});
//with this implementation, on checkbox implies unmute and started state. //使用此实现,选中复选框表示取消静音和开始状态。 //off checkbox implies stopped or started+mute state.
// off复选框表示停止或开始+静音状态。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.