Table of Contents
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"]

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 alphaTabalphatab.netCả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"]

.../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>

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"]
Demo hiển thị tab guitar pro trên Web viettabs.cf
http://viettabs.cf/demo.html
Warning: Undefined variable $comments_number in /shared/webdir2/dothanhlong.org/wp-content/themes/business-hub/comments.php on line 35
Warning: Undefined variable $comments_number in /shared/webdir2/dothanhlong.org/wp-content/themes/business-hub/comments.php on line 39
0 thoughts on “[Tutorial part 2] Xây dựng viettabs.cf – Thư viện Web đọc file guitar tab pro”