Question

我有以下代码：

<title>Web Audio API</title>
</head>
<body>

    <div class="post red">
      <div class="inner">
        <h2 class="title">Oscillator</h2>
        <div class="post_info">
          <p class="date"><i class="fa fa-audio-description"></i> Placeholder</p>
          <p class="read_length"><i class="fa fa-clock-o"></i> 1 minute read</p>
          <input id="red" type="range" min="50" max="5000" step="1" value="90"/>



        </div>
      </div>

    </div>
  </a>

  <a href="#">
    <div class="post green">
      <div class="inner">
        <h2 class="title">Filter</h2>
        <div class="post_info">
          <p class="date"><i class="fa fa-audio-description"></i> Placeholder</p>
          <p class="read_length"><i class="fa fa-clock-o"></i> 1 minute read</p>
          <input id="green" type="range" min="50" max="5000" step="1" value="90"/>

          <input id="green" type="range" min="50" max="5000" step="1" value="90"/>



          <script>



        </script>
        </div>
      </div>
    </div>
  </a>

  <a href="#">
    <div class="post purple">
      <div class="inner">
        <h2 class="title">LFO</h2>
        <div class="post_info">
          <p class="date"><i class="fa fa-audio-description"></i> Placeholder</p>
          <p class="read_length"><i class="fa fa-clock-o"></i> 1 minute read</p>
           <input id="purple" type="range" min="50" max="5000" step="1" value="90"/>
            <input id="purple" type="range" min="50" max="5000" step="1" value="90"/>
             <input id="purple" type="range" min="50" max="5000" step="1" value="90"/>

        </div>
      </div>
    </div>
  </a>

  <a href="#">
    <div class="post lime_green">
      <div class="inner">
        <h2 class="title">VCO</h2>
        <div class="post_info">
          <p class="date"><i class="fa fa-audio-description"></i> Placeholder</p>
          <p class="read_length"><i class="fa fa-clock-o"></i> 1 minute read</p>
        </div>
      </div>
    </div>
  </a>

  <a href="#">
    <div class="post pink">
      <div class="inner">
        <h2 class="title">Placeholder</h2>
        <div class="post_info">
          <p class="date"><i class="fa fa-audio-description"></i> Placeholder</p>
          <p class="read_length"><i class="fa fa-clock-o"></i> 1 minute read</p>
        </div>
      </div>
    </div>
  </a>

  <a href="#">
    <div class="post orange">
      <div class="inner">
        <h2 class="title">Placeholder</h2>
        <div class="post_info">
          <p class="date"><i class="fa fa-audio-description"></i> Placeholder</p>
          <p class="read_length"><i class="fa fa-clock-o"></i> 1 minute read</p>
        </div>
      </div>
    </div>
  </a>

  <a href="#">
    <div class="post yellow">
      <div class="inner">
        <h2 class="title">Placeholder</h2>
        <div class="post_info">
          <p class="date"><i class="fa fa-audio-description"></i> Placeholder</p>
          <p class="read_length"><i class="fa fa-clock-o"></i> 1 minute read</p>
        </div>
      </div>
    </div>
  </a>

  <a href="#">
    <div class="post blue">
      <div class="inner">
        <h2 class="title">Placeholder</h2>
        <div class="post_info">
          <p class="date"><i class="fa fa-audio-description"></i> Placeholder</p>
          <p class="read_length"><i class="fa fa-clock-o"></i> 1 minute read</p>
        </div>
      </div>
    </div>
  </a>

</body>

// JS

          context = new AudioContext();
          var osc = document.getElementByClassName('post red');


          osc.onmousedown = function () {
          var oscPitch = document.getElementByClassName('post red').value;
          oscillator = context.createOscillator(),
          oscillator.type = 0;
          oscillator.frequency.value = oscPitch;
          oscillator.connect(context.destination);
          oscillator.start(osc);

        };

        osc.onmouseup = function () {
          oscillator.disconnect();
        };

我的尝试是在css类点击事件上运行js代码。说：红色

我想知道是否有人知道该怎么做。基本上它只是播放振荡器声音。其余的代码并不重要。谢谢！

Answer 1

您可以使用.click()确定点击red课程的时间。这是一个例子。在这种情况下，单击时它只显示警报。您只需使用音频功能更改提醒即可。

jQuery(document).ready(function(){
  $('.red').click(function(){
  if($(this).hasClass('post')){
    $(this).find('input').each(function(i){
        // equal to var oscPitch = document.getElementByClassName('post red').value;
        var oscPitch = $(this).val(); 
        alert(oscPitch);
    })
  }
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<title>Web Audio API</title>
</head>
<body>

    <div class="post red">
      <div class="inner">
        <h2 class="title">Oscillator</h2>
        <div class="post_info">
          <p class="date"><i class="fa fa-audio-description"></i> Placeholder</p>
          <p class="read_length"><i class="fa fa-clock-o"></i> 1 minute read</p>
          <input id="red" type="range" min="50" max="5000" step="1" value="90"/>



        </div>
      </div>

    </div>
  </a>

  <a href="#">
    <div class="post green">
      <div class="inner">
        <h2 class="title">Filter</h2>
        <div class="post_info">
          <p class="date"><i class="fa fa-audio-description"></i> Placeholder</p>
          <p class="read_length"><i class="fa fa-clock-o"></i> 1 minute read</p>
          <input id="green" type="range" min="50" max="5000" step="1" value="90"/>

          <input id="green" type="range" min="50" max="5000" step="1" value="90"/>



          <script>



        </script>
        </div>
      </div>
    </div>
  </a>

  <a href="#">
    <div class="post purple">
      <div class="inner">
        <h2 class="title">LFO</h2>
        <div class="post_info">
          <p class="date"><i class="fa fa-audio-description"></i> Placeholder</p>
          <p class="read_length"><i class="fa fa-clock-o"></i> 1 minute read</p>
           <input id="purple" type="range" min="50" max="5000" step="1" value="90"/>
            <input id="purple" type="range" min="50" max="5000" step="1" value="90"/>
             <input id="purple" type="range" min="50" max="5000" step="1" value="90"/>

        </div>
      </div>
    </div>
  </a>

  <a href="#">
    <div class="post lime_green">
      <div class="inner">
        <h2 class="title">VCO</h2>
        <div class="post_info">
          <p class="date"><i class="fa fa-audio-description"></i> Placeholder</p>
          <p class="read_length"><i class="fa fa-clock-o"></i> 1 minute read</p>
        </div>
      </div>
    </div>
  </a>

  <a href="#">
    <div class="post pink">
      <div class="inner">
        <h2 class="title">Placeholder</h2>
        <div class="post_info">
          <p class="date"><i class="fa fa-audio-description"></i> Placeholder</p>
          <p class="read_length"><i class="fa fa-clock-o"></i> 1 minute read</p>
        </div>
      </div>
    </div>
  </a>

  <a href="#">
    <div class="post orange">
      <div class="inner">
        <h2 class="title">Placeholder</h2>
        <div class="post_info">
          <p class="date"><i class="fa fa-audio-description"></i> Placeholder</p>
          <p class="read_length"><i class="fa fa-clock-o"></i> 1 minute read</p>
        </div>
      </div>
    </div>
  </a>

  <a href="#">
    <div class="post yellow">
      <div class="inner">
        <h2 class="title">Placeholder</h2>
        <div class="post_info">
          <p class="date"><i class="fa fa-audio-description"></i> Placeholder</p>
          <p class="read_length"><i class="fa fa-clock-o"></i> 1 minute read</p>
        </div>
      </div>
    </div>
  </a>

  <a href="#">
    <div class="post blue">
      <div class="inner">
        <h2 class="title">Placeholder</h2>
        <div class="post_info">
          <p class="date"><i class="fa fa-audio-description"></i> Placeholder</p>
          <p class="read_length"><i class="fa fa-clock-o"></i> 1 minute read</p>
        </div>
      </div>
    </div>
  </a>

</body>

Answer 2

使用

document.getElementsByClassName('post red')

而不是

document.getElementByClassName('post red')

Answer 3

如果您想在Pure Javascript中使用该事件，则可以执行以下操作。

var osc = document.getElementsByClassName("post red")[0];
var oscPitch = osc.value;

osc.addEventListener("click",function(e){
    oscillator = context.createOscillator(),
    oscillator.type = 0;
    oscillator.frequency.value = oscPitch;
    oscillator.connect(context.destination);
    oscillator.start(osc);
}, false);

Answer 4

由于您只有 一个具有类 red的输入，因此您的osc变量应该像这样声明。

var osc = document.getElementsByClassName('post red')[0];

要检测您的开始事件以播放应使用addEventListener的声音。

osc.addEventListener("click", function(){

});

总结一下。

      context = new AudioContext();
      var osc = document.getElementsByClassName('post red')[0];
      var oscPitch = osc.value;
      var oscillator = context.createOscillator();
      oscillator.type = 0;
      oscillator.frequency.value = oscPitch;
      osc.addEventListener("mousedown", function(){ // or any other event
      oscillator.connect(context.destination);
      oscillator.start(osc);
      });
      osc.addEventListener("mouseup", function(){ // or any other event
      oscillator.disconnect();
      });

Answer 5

Here's the aforementioned red css class:

    .post {
      width: 50%;
      float: left;
      min-height: 400px;
     color: $white;
     display: table;
      .inner {
    display: table-cell;
    vertical-align: middle;
    padding: 0 15%;
  }
  .title {
    font-size: 1.75em;
  }
  .post_info {
    .date, .read_length {
      display: inline;
      font-size: 1.1em;
    }
    .date {
      margin-right: 1em;
    }
  }

  transition: background 0.4s ease-in-out;
}

.red {
  background: $red;
  .post_info {
    .date {
      color: #A25F5E;
    }
    .read_length {
      color: #F8B4B2;
    }
  }
  &:hover {
    background: darken($red, 10%);
  }

}

如何在css类onclick事件上调用函数

5 个答案: