[Tutorial part 2] Xây dựng viettabs.cf – Thư viện Web đọc file guitar tab pro

Xây dựng viettabs.cf – Thư viện Web đọc file guitar tab pro

http://viettabs.cf/demo.html

Ở hướng dẫn trước, mình đã giải thích một số khái niệm quan trọng khi muốn deploy một ứng dụng Web như Hosting, Domain, VPS,… Bạn nào chưa xem có thể xem ở đây:

[Tutorial part 1] Xây dựng viettabs.cf – Đăng ký Hosting, Domain, Upload data

Những công việc còn lại để xây dựng ứng dụng viettabs.cf bao gồm:

Những công việc còn lại để xây dựng ứng dụng viettabs.cf
Những công việc còn lại để xây dựng ứng dụng viettabs.cf

Trong đó, việc tìm thư viện đọc được các tab guitar pro là rất quan trọng, vì đó là một trong những chức năng cơ bản mà mình đã vạch ra cho ứng dụng.

Tab guitar pro thì có vài định dạng như: *.gp3, *.gp4, *.gp5, *.gpx,.. Để đọc được các file tab này thì trên Desktop đã có một vài phần mềm như Guitar Pro (có phí) và Tuxguitar (mã nguồn mở). Còn trên Web thì mình chưa biết…. và giờ phải tìm, kaka

Thư viện alphatab

Hên sau, sau một hồi tìm kiếm thì mình cũng đã tìm được một thư viện ưng ý, đó là thư viện alphaTab

alphatab.net

Cảm ơn alphatab đã tạo ra một thư viện hay như vậy^^

Thư viện được chia sẻ publish trên GitHub ở đây:

https://github.com/CoderLine/alphaTab

Thư viện alphatab
Thư viện alphatab

Ngoài thư viện được viết bằng Javascript dành cho Web Dev, alphatab cũng build một phiên bản dành cho C# dev (*.dll)

Giờ thì chỉ việc download về và sử dụng thôi

Tài liệu về thư viện này:

User Documentation

Bộ thư viện này dùng HTML5 Canvas để hiển thị sheet nhạc, do vậy mình nghĩ là cũng sẽ hiển thị ok ở các thiết bị di động.

Để sử dụng thì mình dùng luôn template advanced của alphaTab

…/Samples/JavaScript/#general/advanced.html

Ở template này có sẵn các control điều khiển như

play

stop

speed

print

layout

…..

Những thứ chúng ta sẽ đỡ mắc công phải config lại trong Javascript.

Khai báo file tab guitar với alphaTab

Để chèn file tab của chúng ta vào thì chúng ta mở file template lên và tìm thẻ div với id là alphaTab rồi khai báo đường dẫn đến file tab ở thuộc tính data-file

Khai báo file tab guitar với alphaTab

Khai báo file tab guitar với alphaTab

Hiển thị tab guitar với alphaTab

Sau khi khai báo xong thì chạy thử, kết quả chạy localhost như hình dưới:

Hiển thị tab guitar với alphaTab
Hiển thị tab guitar với alphaTab

Tab nhạc hiển thị ok với alphaTab

Chúng ta có thể play guitar tab luôn bằng chức năng play nhạc.

Vậy là xong phần tìm và sử dụng thư viện hiển thị tab guitar pro trên nền Web.

Demo hiển thị tab guitar pro trên Web viettabs.cf

http://viettabs.cf/demo.html

Hi vọng các bạn làm được

-soiqualang_chentreu-