Các bước đầu tiên của bạn với API âm thanh web

API âm thanh web là một lớp trừu tượng nhằm mục đích đơn giản hóa việc lập trình âm thanh cho web.

Trong phần giới thiệu ngắn này, bạn sẽ tìm hiểu về AudioContext của API Web Audio và khả năng của các AudioContext để tạo các bộ dao động đơn giản được dùng để biến trình duyệt của bạn thành một bộ tổng hợp cổ điển! Các đoạn mã của hướng dẫn này đã được thử nghiệm trong Chrome, nhưng bạn có thể có thể làm theo bằng cách sử dụng console của các công cụ dành cho nhà phát triển trình duyệt yêu thích của bạn.

Chuẩn bị công việc

Như đã đề cập, hỗ trợ cho API âm thanh web không phải là phổ biến, vì vậy tốt nhất bạn nên xác minh API có sẵn trong trình duyệt của user :

let audioContext;

try {
  audioContext =
    new (window.AudioContext || window.webkitAudioContext)();
} catch (error) {
  window.alert(
    `Sorry, but your browser doesn't support the Web Audio API!`
  );
}

if (audioContext !== undefined) {
  /* Our code goes here */
}

Sau bước kiểm tra đơn giản này, ta có thể yên tâm sử dụng chức năng của Web Audio API.

Giới thiệu về AudioContext

Có thể hữu ích khi hình dung audioContext – bản sao của AudioContext – như một loại DJ: nó điều phối một bộ sưu tập các nguồn âm thanh và đảm bảo các nguồn phát qua loa của user vào đúng thời điểm và đúng “âm thanh”. Và giống như một DJ, ta có thể audioContext như một trung gian giữa các nguồn âm thanh và “hệ thống âm thanh”, phần cứng âm thanh của server . Dưới đây là một số điều cần lưu ý khi làm việc với AudioContext :

AudioContext là một “người giữ thời gian” chính. Tất cả các tín hiệu phải được lập lịch liên quan đến audioContext.currentTime .
Các version của AudioContext có thể tạo nguồn âm thanh từ đầu.

Một bộ dao động đơn giản

Để xem nó có thể tự tạo ra những loại âm thanh nào, hãy sử dụng audioContext để tạo OscillatorNode :

const oscillator = audioContext.createOscillator();

Đây là tất cả những gì ta cần để tạo ra âm thanh với trình duyệt – AudioContext và OscillatorNode . Nhưng trước tiên, ta cần "kết nối" bộ oscillator với audioContext :

oscillator.connect(audioContext.destination);

API âm thanh web cố gắng bắt chước chuỗi tín hiệu tương tự. Ta chuyển tín hiệu đầu vào (bộ oscillator ) vào một bộ audioContext công suất kỹ thuật số ( audioContext ), sau đó chuyển tín hiệu đến loa ( destination ).

Nào hãy tạo ra sự náo nhiệt:

oscillator.start();

Bạn sẽ nghe thấy âm thanh tương đương với âm quay số. Xin chúc mừng, bạn đang tạo nhạc bằng API âm thanh web! Tất nhiên, không ai muốn nghe mãi một âm vực giống nhau. Bạn có thể dừng bộ oscillator của ta theo cách này:

oscillator.stop();

Khi một Chế độ âm thanh đã bị dừng, nó không thể khởi động lại! Một Mã âm thanh mới cần được tạo để tiếp tục phát lại.

Cả hai phương thức start và stop đều chấp nhận một tham số duy nhất của kiểu number . Giá trị tham số được sử dụng để lập lịch các sự kiện bắt đầu / dừng:

/* Emit a signal 10 seconds from now */
oscillator.start(audioContext.currentTime + 10);

/* Cancel the signal 10 seconds after that */
oscillator.stop(audioContext.currentTime + 20);

Hãy kết luận bằng cách điều khiển bộ oscillator của ta để tạo ra các âm thanh khác nhau.

Thao tác âm thanh với AudioParams

Ghi log đối tượng oscillator , ta nhận được thông tin như thế này (các giá trị thuộc tính cụ thể bị bỏ qua vì chúng có thể khác nhau tùy thuộc vào thiết bị / trình duyệt):

console.log(oscillator);
/*
  {
    channelCount: number,
    context: AudioContext,
    detune: AudioParam,
    type: 'sine' | 'sawtooth' | 'triangle' | 'square'
    frequency: AudioParam,
    numberOfInputs: number,
    numberOfOutputs: number,
    onended: function
    ...
  }
*/

Thuộc tính quan trọng nhất cho mục đích của ta là oscillator.frequency :

console.log(oscillator.frequency);
/*
  {
    defaultValue: number,
    maxValue: number,
    minValue: number,
    value: number // Probably 440 (A4)
  }
*/

Giá trị frequency của bộ oscillator của ta thực hiện giao diện AudioParam . Âm thanh của một AudioNode như bộ oscillator có thể được điều khiển thông qua các thuộc tính AudioParam của nó. Tuy nhiên, việc gán lại trực tiếp cho thuộc tính value AudioParam đã không còn được dùng để ủng hộ các phương thức trợ giúp.

/* Don't do this */
oscillator.frequency.value = 500;

Nếu ta muốn bộ oscillator mình phát ra "Bb" thay vì "A", ta nên làm như sau:

/* The frequency (in Hz) of Bb4 is 466.16 */
oscillator
  .frequency
  .setValueAtTime(466.16, audioContext.currentTime);

hoặc là

/* Slowly transition to Bb4 over the span of 10 seconds */
oscillator
  .frequency
  .exponentialRampToValueAtTime(
      466.16,
      audioContext.currentTime + 10
  );

Phần thưởng: điều chỉnh dạng sóng tuần hoàn

Bộ oscillator của ta sử dụng một dạng sóng tuần hoàn để phát ra âm của nó. Dạng sóng được đại diện bởi thuộc tính type của giao diện OscillatorNode . Theo mặc định, type là 'sine' . Hầu hết các trình duyệt hỗ trợ ít nhất ba tùy chọn khác: 'sawtooth' , 'triangle' và 'square' . Vì vậy, thay đổi "giai điệu" của bộ oscillator của ta đơn giản như:

oscillator.type = 'triangle';

Kết luận

Tạo và xử lý âm thanh trong trình duyệt dễ dàng hơn bao giờ hết nhờ API âm thanh web. Với sự trợ giúp của nó, các nhà phát triển web có thể tạo lại tông màu đồng điệu cổ điển với 3-5 dòng mã.

🎶 THỬ THÁCH: Sử dụng API Web Audio để lập trình riff từ Funkytown !

Tags:

Các tin liên quan

Gói ứng dụng web của bạn bằng bưu kiện
2017-12-09
Tích hợp các thành phần web với ứng dụng Vue.js của bạn
2017-09-25
Cách làm việc với dữ liệu web bằng cách sử dụng yêu cầu và món súp đẹp mắt với Python 3
2017-07-14
Sử dụng Web worker một cách dễ dàng trong Vue.js với vue-worker
2017-05-16
Cách cài đặt Icinga và Icinga Web trên Ubuntu 16.04
2017-05-05
Cách lưu trữ nhiều trang web với Nginx và HAProxy bằng LXD trên Ubuntu 16.04
2017-04-19
Cách bảo mật ứng dụng web nông dân của bạn bằng Let's Encrypt trên Ubuntu 16.04
2017-03-29
Xây dựng các thành phần web gốc với Vue.js
2017-03-16
Cách sử dụng OpenResty Web Framework cho Nginx trên Ubuntu 16.04
2017-02-28
Roundup: Thư viện thành phần ứng dụng web trên máy tính để bàn Vue.js - Cập nhật Q4 2017
2017-02-23