Bối cảnh và vấn đề nghiên cứu

Khóa luận tốt nghiệp "Xây dựng website nghe nhạc trực tuyến" (Building a Music Streaming Website) được thực hiện bởi sinh viên Phạm Minh Việt (MSSV: 18520398), dưới sự hướng dẫn của TS. Đỗ Thị Thanh Tuyền và ThS. Trần Thị Hồng Yến, thuộc Khoa Công nghệ Phần mềm, Trường Đại học Công nghệ Thông tin – Đại học Quốc gia TP. Hồ Chí Minh (2023).

Lý do chọn đề tài

Trong đời sống hiện đại, âm nhạc là một trong những phương tiện giải trí thiết yếu, có tác động sâu sắc đến tư tưởng, trí tuệ và cảm xúc của con người. Việc thưởng thức âm nhạc giúp giải tỏa căng thẳng, nâng cao chất lượng đời sống tinh thần. Xuất phát từ nhu cầu thực tế về một nền tảng kỹ thuật số cho phép tiếp cận, chia sẻ và tương tác âm nhạc linh hoạt, đề tài tập trung xây dựng một website phát nhạc trực tuyến tích hợp các công cụ quản lý bài hát, danh sách phát và phụ đề tự động.

Mục tiêu nghiên cứu

Mục tiêu tổng quát và cụ thể của khóa luận bao gồm:

  1. Xây dựng một website nghe nhạc trực tuyến đáp ứng đầy đủ các tính năng cơ bản và nâng cao: nghe nhạc trực tuyến, tải bài hát về máy, đăng tải bài hát từ nhiều nguồn, tạo và quản lý danh sách bài hát cá nhân, phân loại thể loại và tạo/quản lý phụ đề.
  2. Xây dựng giao diện trực quan, khoa học, dễ tiếp cận và dễ sử dụng đối với người dùng cuối.

Đối tượng sử dụng

Hệ thống hướng tới ba nhóm đối tượng người dùng chính:

  1. Người có nhu cầu nghe nhạc và giải trí trực tuyến.
  2. Người có nhu cầu lưu trữ, chia sẻ và đăng tải các bài hát yêu thích lên nền tảng.
  3. Tác giả, nghệ sĩ có mong muốn chia sẻ các tác phẩm âm nhạc do bản thân tự sáng tác.

Phạm vi nghiên cứu

Đề tài giới hạn phạm vi xây dựng và triển khai một hệ thống ứng dụng web với các cụm chức năng:

  • Xác thực người dùng (đăng ký, đăng nhập, đổi mật khẩu, quản lý hồ sơ).
  • Tương tác âm nhạc (nghe nhạc, tải bài hát, đánh giá bài hát, hiển thị phổ âm thanh).
  • Quản trị nội dung (quản lý danh sách phát cá nhân, phân loại bài hát theo thể loại, tải lên và chỉnh sửa bài hát).
  • Tương tác xã hội và thông tin nghệ sĩ (theo dõi người dùng khác, hiển thị danh sách bài hát từ người đang theo dõi, liên kết tiểu sử nghệ sĩ).
  • Xử lý phụ đề (tạo phụ đề thủ công và tự động nhận diện phụ đề qua dịch vụ trí tuệ nhân tạo).

Cơ sở lý thuyết và phương pháp

Khóa luận kết hợp giữa nghiên cứu lý thuyết về kiến trúc phần mềm, các framework phát triển web hiện đại, dịch vụ điện toán đám mây và quy trình kỹ thuật phần mềm chuẩn mực.

Khung công nghệ và công cụ sử dụng

Hệ thống được xây dựng dựa trên ngăn xếp công nghệ (tech stack) phân tách rõ ràng giữa Front-end, Back-end, Cơ sở dữ liệu và Dịch vụ đám mây:

Tầng kiến trúc / Thành phần Công nghệ / Dịch vụ áp dụng Vai trò và đặc tính kỹ thuật
Front-end Vue.js Framework JavaScript mã nguồn mở xây dựng giao diện Single-Page Application (SPA), tập trung vào view layer.
Vue Audio Visual Plugin xây dựng trên HTML5 Web Audio API, hỗ trợ trực quan hóa phổ âm thanh theo thời gian thực.
LocalForage Thư viện JavaScript hỗ trợ lưu trữ client qua IndexedDB, Web SQL và localStorage với ES6 Promise API.
JavaScript Ngôn ngữ kịch bản phía máy khách xử lý logic tương tác người dùng.
Back-end .NET Core / ASP.NET Core Nền tảng phát triển đa nền tảng (cross-platform), mã nguồn mở của Microsoft xây dựng REST API.
Entity Framework (EF) Khung Object-Relational Mapping (ORM) ánh xạ các thực thể cơ sở dữ liệu lên đối tượng C#.
Cơ sở dữ liệu PostgreSQL Hệ quản trị cơ sở dữ liệu quan hệ - đối tượng mã nguồn mở, độ ổn định cao.
Dịch vụ Cloud & AI Azure App Services Dịch vụ lưu trữ và thực thi ứng dụng web, REST API trên nền tảng đám mây HTTP.
Azure Blob Storage Dịch vụ lưu trữ dữ liệu phi cấu trúc (Block blob, Append blob, Page blob) cho file audio và hình ảnh.
Azure Cognitive Services Bộ API trí tuệ nhân tạo/Machine Learning nhận diện giọng nói và tự động sinh phụ đề (Closed Caption).
Công cụ phát triển Visual Studio, VS Code, Git, GitHub, Insomnia Công cụ soạn thảo mã nguồn, quản lý phiên bản phân tán (DVCS) và kiểm thử API HTTP (GET, POST).

Phương pháp nghiên cứu và thực hiện

Quy trình phát triển phần mềm trong khóa luận được thực hiện theo 8 bước tuần tự:

  1. Tìm hiểu, khảo sát các website nghe nhạc trực tuyến hiện có trên thị trường nhằm xác định tính năng tiêu chuẩn và các hạn chế cần khắc phục.
  2. Phân tích yêu cầu chức năng, yêu cầu lưu trữ và yêu cầu phi chức năng của hệ thống.
  3. Đặc tả chi tiết yêu cầu phần mềm thông qua mô hình use case, bảng đặc tả use case và biểu đồ tuần tự (sequence diagram).
  4. Thiết kế kiến trúc tổng thể, kiến trúc phân tầng của website và mô hình cơ sở dữ liệu quan hệ.
  5. Hiện thực hóa các module chức năng trên Back-end (ASP.NET Core) và Front-end (Vue.js).
  6. Thiết kế giao diện đồ họa người dùng (UI) cho từng màn hình chức năng.
  7. Kiểm tra, phát hiện và sửa lỗi hệ thống.
  8. Triển khai ứng dụng và cơ sở dữ liệu lên môi trường đám mây Microsoft Azure.

Thiết kế và triển khai hệ thống

Phân tích yêu cầu và mô hình Use Case

Hệ thống xác định 1 tác nhân chính là User (Người dùng) và 26 ca sử dụng (Use Case) được đánh mã từ UC001 đến UC026:

Mã Use Case Tên Use Case Phân nhóm chức năng Mô tả tóm tắt
UC001 – UC003 Sign in, Sign up, Change password Xác thực tài khoản Quản lý định danh người dùng qua email và mật khẩu.
UC004 – UC006 Check profile, Edit information, Follow/unfollow user Quản lý người dùng & Tương tác Quản lý thông tin cá nhân, ảnh đại diện và danh sách theo dõi.
UC007 – UC011 Search tracks, Search by genre, Play track, Rate, Download Tương tác bài hát Tìm kiếm theo từ khóa/thể loại, phát nhạc trực tuyến, đánh giá thích (Like) và tải bài hát.
UC012 – UC016 Add to playlist, Create playlist, Edit playlist, Remove track, Delete playlist Quản lý danh sách phát Tạo, đổi tên, xóa danh sách bài hát và chỉnh sửa bài hát trong danh sách.
UC017 – UC021 Upload track, Choose a genre, Link artist’s biography, Search artist, Create artist’s biography Quản lý tải lên & Nghệ sĩ Đăng tải tệp bài hát, gắn thẻ thể loại và tạo/liên kết thông tin tiểu sử nghệ sĩ.
UC022 – UC026 Edit track, Create captions, Edit captions, Generate captions, Delete track Quản lý bài hát & Phụ đề Chỉnh sửa thông tin bài hát, tạo/chỉnh sửa phụ đề thủ công, sinh phụ đề tự động và xóa bài hát.

Cơ chế bảo mật và mã hóa

Đối với các chức năng xác thực người dùng (UC001, UC002, UC003), hệ thống áp dụng cơ chế băm mật khẩu bảo mật chuẩn:

  • Thuật toán: PBKDF2 kết hợp HMAC-SHA256.
  • Tham số kỹ thuật: Muối ngẫu nhiên (salt) độ dài 128-bit, khóa con (subkey) độ dài 256-bit, số vòng lặp thực thi 10.000 bước lặp (iterations).
  • Quy tắc nghiệp vụ: Ràng buộc độ dài chuỗi ký tự hiển thị từ 5 đến 64 ký tự; không cho phép để trống trường bắt buộc; ẩn thông tin nhạy cảm khi xem hồ sơ của người dùng khác.

Thiết kế cơ sở dữ liệu

Cơ sở dữ liệu của hệ thống được xây dựng trên PostgreSQL, bao gồm 7 bảng thực thể chính:

  1. Member: Lưu trữ thông tin tài khoản người dùng (ID, email, mật khẩu đã băm, tên hiển thị, ảnh đại diện, tiểu sử).
  2. Memberstats: Lưu trữ các số liệu thống kê liên quan đến hoạt động của người dùng.
  3. Genre: Lưu trữ danh mục thể loại âm nhạc dùng cho bộ lọc và phân loại.
  4. ArtistInfo: Lưu trữ thông tin chi tiết, tiểu sử và hình ảnh của nghệ sĩ.
  5. Playlist: Lưu trữ thông tin các danh sách phát nhạc do người dùng tạo lập.
  6. Track: Lưu trữ thông tin tệp âm thanh, tiêu đề, đường dẫn lưu trữ đám mây, lượt nghe, lượt thích và liên kết thể loại/nghệ sĩ.
  7. ClosedCaption: Lưu trữ phụ đề từng bài hát (mốc thời gian, nội dung văn bản phụ đề).

Tích hợp trí tuệ nhân tạo và dịch vụ lưu trữ đám mây

  • Tự động sinh phụ đề (Generate Captions - UC025): Khi người dùng kích hoạt chức năng tạo phụ đề, hệ thống gửi yêu cầu từ client tới server ASP.NET Core. Server tiến hành gọi REST API của dịch vụ Azure Cognitive Services để xử lý tệp âm thanh và trích xuất dữ liệu giọng nói thành văn bản phụ đề theo thứ tự tuần tự thời gian.
  • Lưu trữ tệp đa phương tiện: Ứng dụng tận dụng Azure Blob Storage để phân tách lưu trữ tệp nhị phân. Các tệp bài hát (audio) và hình ảnh (ảnh đại diện, ảnh bìa) được lưu trữ dưới dạng Block blob (hỗ trợ tối đa 50.000 block, mỗi block lên tới 100 MB, tổng dung lượng lý thuyết đạt xấp xỉ 4,75 TB).
  • Lưu trữ nhật ký và sao lưu: Hệ thống phân định cấu trúc hỗ trợ Append blob (tối đa 195 GB cho dữ liệu log) và Page blob (tối đa 1 TB cho hoạt động đọc/ghi ngẫu nhiên).

Nội dung chính theo từng chương

Chương 1: Tổng quan

Chương 1 thiết lập cơ sở khoa học và thực tiễn của đề tài. Tác giả trình bày lý do chọn đề tài dựa trên vai trò của âm nhạc trong đời sống; xác định rõ mục tiêu xây dựng website nghe nhạc trực tuyến có khả năng quản lý bài hát, danh sách bài hát và tạo phụ đề. Chương này cũng phân định 3 nhóm đối tượng sử dụng, xác định phạm vi chức năng (nghe nhạc, tải bài hát, bảng xếp hạng nghe nhiều nhất theo ngày/thể loại, theo dõi người dùng) và thiết lập quy trình thực hiện gồm 8 bước từ nghiên cứu thị trường đến triển khai thực tế.

Chương 2: Kiến thức nền tảng

Chương 2 trình bày chi tiết các công cụ và nền tảng công nghệ được lựa chọn trong quá trình phát triển:

  • Công cụ lập trình và quản lý dự án: Phân tích tính năng gỡ lỗi, IntelliSense của Visual Studio Code và Visual Studio; cơ chế quản lý snapshot phân tán của Git; mạng xã hội mã nguồn mở GitHub và công cụ kiểm thử HTTP REST API Insomnia.
  • Công nghệ phát triển ứng dụng: Giới thiệu kiến trúc View Layer của Vue.js (phiên bản đạt hơn 64.828 sao trên GitHub do Evan You sáng lập); plugin hiển thị sóng âm Vue Audio Visual; ngôn ngữ JavaScript và thư viện LocalForage.
  • Công nghệ Back-end và CSDL: Trình bày kiến trúc đa nền tảng của .NET Core / ASP.NET Core, cơ chế ORM của Entity Framework và hệ quản trị cơ sở dữ liệu quan hệ PostgreSQL.
  • Dịch vụ đám mây Microsoft Azure: Khảo sát chi tiết mô hình hosting Azure App Services; cấu trúc 3 loại blob trong Azure Blob Storage (Block blob, Append blob, Page blob) và bộ REST API trí tuệ nhân tạo Azure Cognitive Services.

Chương 3: Thiết kế ứng dụng

Chương 3 là phần trọng tâm về kỹ thuật phần mềm của khóa luận:

  • Phân tích các yêu cầu hệ thống: Yêu cầu lưu trữ (dữ liệu đồng bộ trực tiếp lên server theo thời gian thực, phụ thuộc vào kết nối Internet), yêu cầu tính năng và các yêu cầu phi chức năng (hiệu suất, tính sẵn sàng/khả dụng, độ tin cậy, giao diện thân thiện và khả năng mở rộng).
  • Xây dựng mô hình Use Case tổng thể với 1 actor (User) và 26 use case chi tiết.
  • Trình bày hệ thống bảng đặc tả chi tiết cho từng use case (từ UC001 đến UC026), bao gồm mã định danh, tên ca sử dụng, độ ưu tiên, sự kiện kích hoạt (trigger), điều kiện tiên quyết (pre-conditions), kết quả sau thực hiện (post-conditions), luồng sự kiện chính, luồng ngoại lệ (exception flow), quy tắc nghiệp vụ (business rules) và yêu cầu phi chức năng.
  • Thiết kế 20 biểu đồ tuần tự (Sequence Diagrams) mô tả luồng giao tiếp giữa Actor, Front-end, Server, CSDL và API đám mây cho các tác vụ: xác thực, tìm kiếm, đánh giá, tải bài hát, quản lý playlist, chỉnh sửa bài hát, tạo/sinh phụ đề.
  • Thiết kế mô hình CSDL gồm 7 bảng thuộc tính (Member, Memberstats, Genre, ArtistInfo, Playlist, Track, ClosedCaption) và xây dựng sơ đồ kiến trúc tổng thể, kiến trúc phân tầng website.

Chương 4: Xây dựng ứng dụng

Chương 4 mô tả quá trình hiện thực hóa thiết kế thành sản phẩm phần mềm cụ thể:

  • Thiết kế giao diện người dùng với danh mục 19 màn hình chức năng: Đăng nhập (credentials), Giao diện chính khi chưa đăng nhập, Giao diện chính sau khi đăng nhập (main), Giao diện home, discover, my_tracks, my_playlists, storage, Thông tin người dùng chính, Thông tin người dùng khác, Thêm vào danh sách, Thông tin bài hát, Thông tin nghệ sĩ, Danh sách bài hát đang chạy, Liên kết nghệ sĩ, Tạo bài hát, Chỉnh sửa bài hát, Giao diện welcome, Giao diện about.
  • Hiện thực hóa logic phát nhạc trực tuyến kết hợp thanh hiển thị phổ âm thanh động.
  • Triển khai toàn bộ mã nguồn và cơ sở dữ liệu lên hạ tầng điện toán đám mây Azure App Services và Azure Blob Storage.

Chương 5: Kết luận

Chương 5 tổng kết toàn bộ quá trình thực hiện khóa luận:

  • Đối chiếu kết quả đạt được với các mục tiêu ban đầu về tính năng, giao diện và hiệu năng xử lý.
  • Đánh giá những thuận lợi và khó khăn trong quá trình tích hợp các công nghệ mới (.NET Core, Vue.js, Azure Services).
  • Đề xuất các định hướng phát triển nhằm nâng cấp và mở rộng hệ thống trong tương lai.

Kết quả và đóng góp

Kết quả kỹ thuật đạt được

Căn cứ vào nội dung báo cáo, khóa luận đã hoàn thành các kết quả cụ thể:

  1. Xây dựng hoàn chỉnh website nghe nhạc trực tuyến Single-Page Application với đầy đủ 26 chức năng theo đặc tả Use Case.
  2. Thiết kế và hiện thực thành công hệ thống giao diện người dùng đồng bộ gồm 19 màn hình tương tác.
  3. Hiện thực hóa cơ sở dữ liệu quan hệ hoàn chỉnh gồm 7 bảng thực thể được quản trị qua PostgreSQL và ánh xạ bằng Entity Framework.
  4. Triển khai thành công giải pháp bảo mật mật khẩu người dùng chuẩn PBKDF2 (HMAC-SHA256, 128-bit salt, 256-bit subkey, 10.000 vòng lặp).
  5. Tích hợp thành công dịch vụ AI điện toán đám mây Azure Cognitive Services để tự động hóa quy trình đọc file âm thanh và sinh phụ đề bài hát theo tuần tự thời gian.
  6. Triển khai vận hành hệ thống trên môi trường đám mây Microsoft Azure (Azure App Services lưu trữ ứng dụng và Azure Blob Storage lưu trữ media).

Đóng góp của đề tài

  • Cung cấp một quy trình mẫu hoàn chỉnh về phân tích, thiết kế và xây dựng hệ thống phát nhạc trực tuyến theo chuẩn kỹ thuật phần mềm (từ khảo sát, mô hình hóa use case, sequence diagram, thiết kế CSDL đến triển khai).
  • Ứng dụng thành công mô hình kiến trúc phân tách hiện đại: Single-Page Application (Vue.js) kết hợp RESTful API (.NET Core/ASP.NET Core), giúp tối ưu hóa hiệu năng truyền tải dữ liệu.
  • Đề xuất và hiện thực hóa giải pháp tích hợp dịch vụ trí tuệ nhân tạo đám mây vào ứng dụng giải trí web nhằm giải quyết bài toán tạo phụ đề âm nhạc tự động.

Hạn chế và hướng nghiên cứu tiếp

Hạn chế của hệ thống

  • Hệ thống đòi hỏi thiết bị người dùng phải duy trì kết nối Internet liên tục để thực hiện các thao tác quản lý, đồng bộ dữ liệu trực tiếp với máy chủ theo thời gian thực (chưa hỗ trợ lưu trữ dữ liệu quản lý ngoại tuyến tại máy khách).
  • Tốc độ truyền tải và trải nghiệm phát nhạc trực tuyến phụ thuộc trực tiếp vào tính ổn định và băng thông của đường truyền mạng khi xử lý các tệp media có dung lượng lớn.
  • Quá trình nghiên cứu và tích hợp đồng thời nhiều dịch vụ đám mây (Azure App Services, Blob Storage, Cognitive Services) gặp phải một số khó khăn kỹ thuật trong việc cấu hình và tối ưu hóa chi phí tài nguyên.

Hướng phát triển tiếp

  • Tối ưu hóa hiệu năng truyền phát (streaming) âm thanh và cải thiện cơ chế bộ đệm (caching) dữ liệu nhằm giảm thiểu độ trễ khi mạng không ổn định.
  • Nâng cấp thuật toán gợi ý bài hát thông minh dựa trên lịch sử nghe nhạc và sở thích cá nhân của từng người dùng.
  • Mở rộng các định dạng tệp âm thanh và tệp phụ đề hỗ trợ, nâng cao độ chính xác của tính năng nhận diện giọng nói tự động trong các môi trường âm thanh có nhiều tạp âm hoặc nhạc nền phức tạp.

Giá trị tham khảo

Tài liệu khóa luận có giá trị tham khảo chuyên môn cao cho:

  • Sinh viên ngành Kỹ thuật Phần mềm, Công nghệ Thông tin: Tham khảo phương pháp phân tích yêu cầu phần mềm, kỹ thuật viết đặc tả Use Case chi tiết, xây dựng biểu đồ tuần tự (Sequence Diagram) và thiết kế CSDL quan hệ theo chuẩn kỹ thuật.
  • Lập trình viên phát triển Web Full-Stack: Tham khảo mô hình tích hợp giữa Vue.js (Front-end) và ASP.NET Core Web API (Back-end), cơ chế xử lý âm thanh Web Audio API với Vue Audio Visual và lưu trữ client qua LocalForage.
  • Kỹ sư phát triển ứng dụng đám mây (Cloud Computing): Tham khảo kiến trúc triển khai ứng dụng trên Azure App Services, phương pháp quản lý dữ liệu đa phương tiện phi cấu trúc trên Azure Blob Storage và cách tích hợp REST API của Azure Cognitive Services để xử lý tác vụ trí tuệ nhân tạo.

Câu hỏi thường gặp

1. Khóa luận sử dụng giải pháp kỹ thuật nào để trực quan hóa sóng âm thanh của bài hát trên giao diện web?

Hệ thống sử dụng plugin Vue Audio Visual, một thành phần được xây dựng trên nền tảng HTML5 Web Audio API. Plugin này cung cấp các component cho phép vẽ trực quan phổ âm thanh và tương thích với tất cả các trình duyệt web hiện đại hỗ trợ Web Audio API.

2. Cơ chế bảo mật và mã hóa thông tin xác thực người dùng được thiết kế với các tham số kỹ thuật nào?

Mật khẩu người dùng được băm (hash) bằng giải thuật PBKDF2 kết hợp HMAC-SHA256, sử dụng chuỗi muối ngẫu nhiên (salt) kích thước 128-bit, khóa con (subkey) kích thước 256-bit và trải qua 10.000 bước lặp trước khi lưu trữ vào cơ sở dữ liệu.

3. Chức năng tự động tạo phụ đề (Generate Captions - UC025) hoạt động dựa trên dịch vụ nào?

Chức năng này tích hợp dịch vụ trí tuệ nhân tạo Azure Cognitive Services của Microsoft thông qua kết nối REST API. Khi người dùng yêu cầu, máy chủ server sẽ gọi dịch vụ này để đọc tệp âm thanh và tự động trích xuất, trả về danh sách phụ đề theo mốc thời gian tuần tự.

4. Cơ sở dữ liệu của website gồm những bảng nào và được quản trị bởi hệ thống nào?

Hệ thống sử dụng hệ quản trị cơ sở dữ liệu quan hệ PostgreSQL, kết hợp framework Entity Framework của .NET để ánh xạ đối tượng C#. Cơ sở dữ liệu bao gồm 7 bảng thực thể chính: Member, Memberstats, Genre, ArtistInfo, Playlist, Track và ClosedCaption.

5. Dữ liệu âm thanh và hình ảnh của website được tổ chức lưu trữ như thế nào trên đám mây?

Toàn bộ tệp âm thanh và hình ảnh được lưu trữ phi cấu trúc trên dịch vụ Azure Blob Storage dưới dạng Block blob (hỗ trợ tối đa 50.000 block, mỗi block lên tới 100 MB, dung lượng tối đa một blob đạt xấp xỉ 4,75 TB), giúp tối ưu hóa việc phân phối nội dung đa phương tiện qua Internet.

Kết luận

Khóa luận tốt nghiệp "Xây dựng website nghe nhạc trực tuyến" của sinh viên Phạm Minh Việt đã hoàn thành trọn vẹn mục tiêu nghiên cứu và phát triển một nền tảng phát nhạc trực tuyến hoàn chỉnh. Đề tài kết hợp thành công các công nghệ hiện đại bao gồm Vue.js, ASP.NET Core, PostgreSQL cùng hệ sinh thái điện toán đám mây Microsoft Azure. Toàn bộ quy trình phân tích 26 use case, thiết kế CSDL 7 bảng, xây dựng 19 màn hình giao diện và tích hợp tính năng tự động sinh phụ đề bằng AI đã chứng minh tính khả thi, tính ứng dụng thực tiễn cao của giải pháp trong lĩnh vực kỹ thuật phần mềm.