Question

这是新功能，还有一个完整的javascript新手！

问题。我正在尝试做钢琴，作为练习，这是我第一次真正尝试javascript（也混入一些jQuery）。

但是为什么我单击按钮时音频没有改变？如果我手动将选中的状态删除/添加到html中的按钮，但不是“实时”，则可以正常工作。

有什么想法吗？我完全感到困惑，我想这可能与音频存储在内存中有关，或者是我必须清除音频，但是我不确定。任何帮助/建议将不胜感激。

谢谢

这是相关的代码位。以及链接：

https://testing.jconnorgraphics.co.uk/pianjo/

function test() {
var C = document.getElementById("myAudioC");
var C3 = document.getElementById("myAudioC3");



if (document.getElementById('checked').checked){

$('.C').click(function() {
                      delete ('myAudioC3');
                      C.play();
                      C.currentTime = 0;
                      C.delete()
                    }
        )
}

else {

$('.C').click(function() {

                        C3.play();
                        C3.currentTime = 0;
                        C3.delete()
                      }
        )
};
};

test();



<div class="switch2" >
      <label class="switch">

              <input id="checked" type="checkbox" checked>
              <span class="slider round"></span>
      </label>
      <p>Audio</p>
</div>


<div class="naturalkey C">
     <p>C</p>
</div>



<audio  id="myAudioC">
    <source src="<?php echo get_template_directory_uri(); ?>/audio/piano/1 C.mp3" type="audio/mpeg">
</audio>

<audio  id="myAudioC3">
    <source src="<?php echo get_template_directory_uri(); ?>/audio/wavetable/2 C.mp3" type="audio/mpeg">
</audio>

是的，我是在Wordpress中创建的，因此是php位，但我认为它们与问题无关。

Answer 1

此代码首先将.C的onclick事件设置为函数a，然后根据#checked click事件将动态设置.C onclick事件。

$(document).ready(function(){

  function a() {
      delete ('myAudioC3');
      C.play();
      C.currentTime = 0;
      C.delete()
    }

    function b() {
      C3.play();
      C3.currentTime = 0;
      C3.delete()
    }

    $('#checked').click(function(){
     let $this = $(this);

     if($this.attr('checked')) {
        $(".C").attr("onclick","a");  
        $this.attr('checked', false);
     } else {
       $(".C").attr("onclick","b");  
       $this.attr('checked',true)
     }
    });


    $(".C").attr("onclick","a");
});

Answer 2

设法使它起作用！

javascript

var C = document.getElementById("myAudioC");
var CC = document.getElementById("myAudioCC");

  function playAudioC() {
  var checked = document.getElementById("checked").checked;

  if ( checked == false) {
        C.play();
        C.currentTime = 0;
       }
       else
       {
      CC.play();
      CC.currentTime = 0;
      };

  };

html

  <audio  preload="auto" id="myAudioC">
  <source src="<?php echo get_template_directory_uri(); ?>/audio/piano/1 C.mp3" type="audio/mpeg">
  </audio>

  <audio  preload="auto" id="myAudioCC">
  <source src="<?php echo get_template_directory_uri(); ?>/audio/wavetable/2 C.mp3" type="audio/mpeg">
  </audio>

  <div onclick="playAudioC()" class="naturalkey">
      <p>C</p>
  </div>


<div class="switch2" >
  <label class="switch">

          <input id="checked" type="checkbox"  >
          <span class="slider round"></span>

  </label>
<p>Audio</p>
</div>

下一个任务是将所有内容循环播放，如果要弄清楚循环，我至少要做12个键！至少进步！

如果手动更改检查状态，但单击该按钮后却无法运行，那么if语句为什么起作用

2 个答案: