Artikel ini meneroka API audio web HTML5, menunjukkan cara membina pad sintetik maya asas dengan pelbagai kesan audio. Kami akan meliputi membuat audiocontext, memuatkan dan memainkan fail audio, menambah kawalan kelantangan, gelung, reverb, dan penapis. Walaupun jQuery memudahkan manipulasi DOM, ia tidak diperlukan untuk API Audio Web itu sendiri.

Konsep Utama:

API Audio Web membolehkan pemprosesan audio yang canggih dalam aplikasi web, sesuai untuk membuat instrumen maya dan pengalaman audio interaktif.
• menguruskan nod audio, menyediakan persekitaran berstruktur untuk memuatkan, menyahkod, dan memanipulasi data audio. AudioContext
Tutorial ini membina pad sintetik yang mudah, menggambarkan teknik teras seperti penciptaan konteks audio, pemuatan fail dan main balik, dan pelaksanaan kesan seperti kawalan kelantangan, gelung, reverb (menggunakan
• ), dan penapisan (ConvolverNode ). BiquadFilterNode

Membina pad synth:

. JQuery digunakan untuk manipulasi DOM yang lebih mudah. Fail JavaScript yang berasingan mengendalikan interaksi API Audio Web. data-sound

<div id="sp">
  <div id="pad1" data-sound="kick.wav"></div>
  <div id="pad2" data-sound="snare.wav"></div>
  <div id="pad3" data-sound="tin.wav"></div>
  <div id="pad4" data-sound="hat.wav"></div>
</div>

Konteks audio dan pemuatan fail:

dicipta, dan fungsi AudioContext mengendalikan pemuatan dan penyahkodan fail audio menggunakan loadAudio dan XMLHttpRequest. decodeAudioData

var context = new AudioContext();

function loadAudio(object, url) {
  var request = new XMLHttpRequest();
  request.open('GET', url, true);
  request.responseType = 'arraybuffer';
  request.onload = function() {
    context.decodeAudioData(request.response, function(buffer) {
      object.buffer = buffer;
    });
  };
  request.send();
}

Bermain bunyi dan menambah kawalan:

meningkatkan setiap pad div dengan sifat untuk sumber bunyi, kawalan kelantangan (addAudioProperties), dan kaedah GainNode. Pendengar acara mencetuskan main balik bunyi pada klik. Kawalan kelantangan dilaksanakan menggunakan input pelbagai. play

function addAudioProperties(object) {
  // ... (code to add properties and play method) ...
}

$(function() {
  $('#sp div').each(function() {
    addAudioProperties(this);
  });
  $('#sp div').click(function() {
    this.play();
  });
  // ... (code for volume control) ...
});

looping, reverb, dan penapisan:

Atas ialah kandungan terperinci HTML5 Web Audio API Tutorial: Membina Pad Synth Maya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!