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: https://dothanhlong.org/tutorial-part-1-xay-dung-viettabs-cf-dang-ky-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: [caption id="attachment_929" align="alignnone" width="845"] Những công việc còn lại để xây dựng ứng dụng viettabs.cf[/caption] 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

[caption id="attachment_931" align="alignnone" width="999"] Thư viện alphatab[/caption] 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: https://www.alphatab.net/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

<div id="alphaTab" data-file="tab/Canon.gp5" data-tracks="3"
data-player="lib/alphaSynth/default.sf2"
data-player-offset="[-10,-70]"></div>

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: [caption id="attachment_934" align="alignnone" width="1272"] Hiển thị tab guitar với alphaTab[/caption] 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-]]>