Giới thiệu về Web MIDI (phần 1)

Bài đăng này đã không được cập nhật trong 3 năm

"1 tut về MIDI? Vào năm 2016? Bạn đang đùa, phải không?"

Không! Nó không như bạn nghĩ đâu! Đối với nhũng người đã sử dụng web từ thập niên 90, cụm từ "Web MIDI" làm nhớ đến một thời gian khi trang web tự động chơi một phiên bản rút gọn bloopy của The Final Countdown khi bạn đã đăng ký sổ lưu niệm của webmaster. Tuy nhiên, vào năm 2016, Web MIDI—và cụ thể là Web MIDI API—có rất nhiều tiềm năng hơn.

MIDI viết tắt của Musical Instrument Digital Interface (tạm dịch: giao diện kĩ thuật số nhạc cụ). Nó là 1 giao thức mà cho phép các nhạc cụ điện tử, các máy tính và các thiết bị khác có thể giao tiếp với nhau. Nó hoạt động bằng cách gửi những tin nhắn nhỏ từ thiết bị này tới thiết bị khác như là "nốt 12 vừa được bấm" hoặc "nốt 62 không được bấm nữa", nhưng ở 1 tốc độ kĩ thuật số.

Web MIDI API sử dụng giao thức này và cho phép bạn làm 1 nhạc cụ MIDI như là keyboard, kết nối nó với máy tính của bạn và có thông tin từ keyboard tới browser.

Hiện tại, Web MIDI API chỉ hỗ trợ trên Chrome và Opera, nhưng bạn có thể làm theo các tiến trình của nó trên Firefox bằng lỗi này.

Vậy tại sao chúng ta muốn kết nối 1 keyboard với 1 browser? Well, không nhiều nhạc sĩ biết cách sử dụng bàn phím QWERTY nhiều như họ làm 1 bản nhạc. Thêm vào đó, khoảng cách của các thiết bị âm nhạc có hỗ trợ MIDI là rất lớn. Bằng cách kết nối 1 thiết bị MIDI vào browser của chúng ta, bên cạnh với việc sử dụng Web Audio API, chúng ta có thể tạo các nhạc cụ trên nền web.

Muốn chơi 1 chiếc piano? Chỉ cần kết nối keyboard của bạn và truy cập tới 1 trang web sử dụng các công nghệ này để tái tạo âm thanh của piano. Muốn 1 âm thanh khác? Đơn giản truy cập trang khác.

May mắn là bạn có thể nhìn thấy lợi ích của API này, nhưng làm thế nào để nó thật sự hoạt động?

Truy cập 1 thiết bị MIDI

Đầu tiên chúng ta muốn kiểm tra trình duyệt có hỗ trợ Web MIDI API không. Chúng ta làm nó bằng cách xem phương thức navigator.requestMIDIAccess tồn tại. Phương thức này chỉ được thực hiện trên browsers hỗ trợ API này.

if (navigator.requestMIDIAccess) {
    console.log('Browser supports MIDI!');
}

Bây giờ chúng ta biết phương thức đó tồn tại, hãy gọi nó để yêu cầu truy cập tới bất kỳ đầu vào MIDI nào đến trình duyệt.

if (navigator.requestMIDIAccess) {
    navigator.requestMIDIAccess()
        .then(success, failure);
}

navigator.requestMIDIAccess() trả lại về 1 báo hiệu, có nghĩa là nó sẽ gọi 1 hàm khi thành công (success function) hay 1 hàm khi thất bại (failure function) tùy thuộc vào kết quả của nó khi yêu cầu truy cập MIDI.

function success (midi) {
    console.log('Got midi!', midi);
}

function failure () {
    console.error('No access to your midi devices.')
}

Như bạn có thể thấy, success function nhận 1 MIDI parameter trong form của 1 MIDIAccess object. MIDIAccess object là chìa khóa để tiếp nhận dữ liệu midi. Object này cung cấp 1 giao diện tới bất kỳ thiết bị MIDI nào mà bạn đã cắm. Đầu vào đại diện cho bất kỳ thiết bị MIDI bạn đã kết nối với máy tính của bạn. Tôi có một bàn phím MIDI đơn kèm theo, vì vậy nếu tôi gọi midi.inputs.size, nó sẽ ra "1".

Để có được các dữ liệu đầu vào từ thiết bị, đầu tiên chúng ta tạo một biến và gán nó midi.inputs.values() như vậy.

var inputs = midi.inputs.values();

Một điều quan trọng cần lưu ý là giá trị được gán cho đầu vào là một iterator. Iterator là một object mà biết làm thế nào để truy cập vào thuộc tính của nó cùng một lúc, trong khi theo dõi các vị trí hiện tại trong trình tự lặp đi lặp lại. Nó cung cấp một phương thức next() để cho phép bạn lấy các item tiếp theo trong chuỗi. Nó cũng có một thuộc tính done cho bạn biết nếu chúng ta lặp qua tất cả các thuộc tính của object. Điều này có nghĩa là chúng ta có thể viết vòng lặp như thế này:

for (var input = inputs.next();
     input && !input.done;
     input = inputs.next()) {
    // each time there is a midi message call the onMIDIMessage function
    input.value.onmidimessage = onMIDIMessage;
}

Vòng lặp trên đang nói gì:

Tạo một biến input và gán đầu vào tiếp theo cho nó. Bởi vì chúng ta không lặp hơn bất kỳ đầu vào nào, này sẽ trả lại giá trị đầu tiên đầu vào của chúng ta.
Nếu chúng ta có một đầu vào và giá trị lặp đầu vào thực hiện không đúng, sau đó tiếp tục với các vòng lặp.
Đặt đầu vào tiếp theo trong đối tượng iterator object của chúng ta.

Bạn cũng sẽ lưu ý rằng bên trong vòng lặp chúng ta đang gán một chức năng cho listener onmidimessage của đầu vào. Chức năng này sẽ được gọi bất cứ lúc nào khi một sự kiện MIDI được nhận từ thiết bị đại diện bởi đầu vào đó. Hãy tạo function đó:

function onMIDIMessage (message) {
    console.log(message.data);
}

What Next

Giải mã dữ liệu MIDI
Tạo 1 nhạc cụ Web

Introduction to Web MIDI
Stuart Memo

Truy cập 1 thiết bị MIDI

What Next

Mục lục