Xây dựng ứng dụng nhận diện bài hát qua giai điệu

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM Trần Duy Khánh - 18520075 Nguyễn Hữu Trí - 18521528 ĐỒ ÁN XÂY DỰNG ỨNG DỤNG NHẬN DIỆN BÀI HÁT QUA GIAI ĐIỆU GIẢNG VIÊN HƯỚNG DẪN Thạc sĩ: Trần Anh Dũng TP HỒ CHÍ MINH, 2021 LỜI CẢM ƠN Sau trình học tập rèn luyện khoa Công nghệ phần mềm trường Đại học Công nghệ Thông tin – ĐHQG TP.HCM chúng em trang bị kiến thức bản, kỹ thực tế để hồn thành Đồ án Để hồn thành Đồ án này, chúng em xin gửi lời cảm ơn chân thành đến: Ban Giám hiệu trường Đại học Công nghệ Thông tin – ĐHQG TP.HCM tạo điều kiện sở vật chất với hệ thống thư viện đại, đa dạng loại sách, tài liệu thuận lợi cho việc tìm kiếm, nghiên cứu thông tin Chúng em xin gửi lời cảm ơn chân thành đến thầy Trần Anh Dũng tận tình giúp đỡ, định hướng cách tư cách làm việc khoa học Đó góp ý q báu khơng q trình thực Đồ án mà hành trang tiếp bước cho chúng em trình học tập lập nghiệp sau Và cuối cùng, chúng em xin gửi lời cảm ơn đến gia đình, tất thầy khoa, bạn bè, tập thể lớp KTPM2018 người sẵn sàng sẻ chia giúp đỡ học tập sống Mong rằng, mãi gắn bó với Trong q trình làm Đồ án chúng em không tránh khỏi sai sót, chúng em kính mong nhận dẫn góp ý q thầy để Đồ án hoàn thiện Chúng em xin chân thành cảm ơn Xin chúc điều tốt đẹp ln đồng hành người Thành phố Hồ Chí Minh, … tháng … năm 2021 Sinh viên TRẦN DUY KHÁNH NGUYỄN HỮU TRÍ ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH CỘNG HỊA XÃ HỘI CHỦ NGHĨA VIỆT NAM TRƯỜNG ĐẠI HỌC Độc Lập - Tự Do - Hạnh Phúc CÔNG NGHỆ THÔNG TIN TP HCM, ngày… tháng … năm 2021 ĐỀ CƯƠNG CHI TIẾT TÊN ĐỀ TÀI: Xây dựng ứng dụng nhận diện hát qua giai điệu TÊN ĐỀ TÀI (TIẾNG ANH): Building Appliction To Recognize Music Cán hướng dẫn: ThS Trần Anh Dũng Thời gian thực hiện: Từ ngày 06/09/2021 đến ngày 01/01/2022 Sinh viên thực hiện: Trần Duy Khánh– 18520075 Nguyễn Hữu Trí – 18521528 Nội dung đề tài Lý chọn đề tài: Hiện nay, phát triển xã hội, nhu cầu giải trí người ngày tăng mạnh Theo thống kê Việt Nam ngày có 68.17 triệu người dùng Internet người dành khoảng phút ngày để nghe nhạc Dưới nhu cầu khổng lồ ấy, thị trường âm nhạc ngày phát triển, liên tục mắt nhiều hát đến với người dùng Và từ phát sinh nhiều vấn đề như: Nếu ngày bạn nghe thấy nhạc hay nhà hàng nơi bạn nhớ hát tuổi thơ không nhớ nỗi tên hát, bạn làm để tìm kiếm hát đó? Làm để gợi ý sản phẩm âm nhạc cho phù hợp với sở thích người dùng ? Nhờ vào phát triển công nghệ thông tin nay, bùng nổ Machine Learning giúp cho việc giải toán ngày khả thi Mang lại lợi ích cho người dùng nhà phát hành nhạc Đó lý nhóm em chọn đề tài Mục tiêu chính: Xây dựng phần mềm Nhận Diện Bài Hát Qua Giai Điệu: + Xây dựng sở liệu lưu trữ hát để giúp đỡ cho việc tìm kiếm hát + Nhận diện tìm kiếm hát qua giai điệu đoạn thu âm người dùng thu Phạm vi: Phạm vi môi trường: Web Phạm vi chức năng: − Có khả thu âm trực tiếp tải lên ghi người dùng thu − Tìm kiếm hát có giai điệu giống với ghi Đối tượng sử dụng: − Người dùng nghe nhạc − Cá nhân, tổ chức phát hành hát − Các công ty lĩnh vực nghe nhạc trực tuyến Phương pháp thực hiện: Phương pháp làm việc: − Làm việc nhóm thành viên thông qua phương thức online offline hướng dẫn giảng viên hướng dẫn Phương pháp nghiên cứu: − Phân tích nhu cầu sử dụng đối tượng người dùng − Nghiên cứu tài liệu công nghệ liên quan − Phương pháp thực nghiệm Phương pháp cơng nghệ: − Tìm hiểu cách thức xây dựng Music Fingerprint − Xây dựng RESTful API để thao tác với liệu − Xây dựng giao diện Web để tương tác với người dùng Nền tảng công nghệ: − − − − − Frontend: AngularJS Backend: Net core Database: PostgreSQL, Redis, Elasticsearch Machine learning: Keras Công nghệ khác: Docker Kết mong đợi: − − Phần mềm có khả phản hồi nhanh xác mức cao Trang web có khả scale hoạt động tốt số lượng người dùng tăng Hướng phát triển đề tài: − − − Trang web nghe nhạc tích hợp tìm kiếm âm nhạc qua giai điệu hệ thống gợi ý Trang web phát đạo nhạc, quyền nhạc qua giai điệu Trang web tìm kiếm beat phù hợp với giai điệu hát Kế hoạch làm việc: Thời gian thực từ ngày 06/09/2021 đến ngày 01/01/2021 Sprint Thời gian Sprint 06/09/2021 – 26/09/2021 Công việc Lựa chọn đề tài − Tìm hiểu cơng nghệ − Khảo sát ứng dụng liên quan − Sprint 27/9/2021 – − Tìm kiếm cài đặt framework phù hợp - Crawl Data Phân tích hệ thống Hiện thực Prototype - Training Module Đánh giá độ xác - Hồn thiện Prototype - Xây dựng APIs Xây dựng giao diện website Sprint 20/12/2021 – 27/12/2021 - Deploy web Testing Sprint 27/12/2021 – 01/01/2022 - Viết báo cáo 10/10/2021 Sprint 11/10/2021 – 24/10/2021 Sprint 25/10/2021 – 7/11/2021 Sprint 8/11/2021 – 28/11/2021 Sprint 29/11/2021 – 19/12/2021 Phân cơng cơng việc Cơng việc - Tìm hiểu Music Fingerprint chung - Phân tích yêu cầu, chức - Xây dựng CSDL, RESTful API - Wireframe giao diện - Crawl Data - Training Module - Xây dựng giao diện - Deploy App MỤC LỤC TÓM TẮT ĐỀ TÀI GIỚI THIỆU CHUNG 10 Lý chọn đề tài 10 Đối tượng nghiên cứu 10 KIẾN THỨC NỀN TẢNG 10 Tổng quan mơ hình MVC 10 Khái niệm 10 Cấu trúc mơ hình MVC 11 Mơ hình MVC ứng dụng Web 12 Tổng quan NET 13 Giới thiệu 13 Tạo chọn NET core để phát triển server 13 Angular 14 Giới thiệu 14 Ưu điểm Angular 15 Hệ quản trị sở liệu MongoDB 15 Giới thiệu 15 Ưu điểm MongoDB 16 TÌM HIỂU VÀ LỰA CHỌN CÔNG NGHỆ 17 Tổng quan trình 17 Xử lý thu âm 17 Time-Domain Frequency-Domain 18 Xử lý lưu trữ chuyển đổi âm 20 Tính chất âm 20 Chuyển đổi tìm kiếm hát 21 Hiện thực hóa cơng nghệ 25 Chuyển đổi lưu trữ âm 25 Tìm kiếm hát 27 XÂY DỰNG HỆ THỐNG 28 Xây dựng kiến trúc hệ thống 28 Kiến trúc hệ thống Website 28 Thiết kế hệ thống 29 Sơ đồ Usecase 29 Phân tích 35 Sơ đồ lớp 35 Danh sách lớp đối tượng quan hệ 35 Mô tả chi tiết đối tượng 36 Thiết kế giao diện 38 Giao diện trang nhận diện 38 Giao diện chức nhận diện 38 Giao diện trang ghi âm 39 Giao diện trang kết 42 Trang kết nhận diện 42 Giao diện trang admin 44 Trang admin 44 Giao diện trang đăng nhập 47 Mô tả chức nhận diện hát 47 Bài toán nhận diện hát 47 Quá trình thu thập liệu 47 Xác định API cần thiết: 47 Cách tạo Signature cho request 49 Gọi API để crawl liệu 50 Áp dụng toán nhận diện 50 Kết luận hướng phát triển 50 Ưu điểm 50 Nhược điểm 51 Kết đạt 51 Về mặt nghiên cứu: 51 Về mặt sản phẩm: 51 Hướng phát triển 51 Tài Liệu Tham Khảo 52 b) Danh sách phương thức STT Tên phương thức Kiểu trả Ý nghĩa/ghi Ràng buộc Create ActionResult public Tạo Fingerprint Thiết kế giao diện Giao diện trang nhận diện Giao diện chức nhận diện Hình 6.1.1 Giao diện chức nhận diện STT Tên thành phần Loại Mô tả thành phần Record Button Thực thu âm hát Import Button Import hát từ local Bảng 6.1.1 Mô tả giao diện nhận diện 38 Giao diện trang ghi âm a) Ghi âm hát Hình 6.1.2 a Giao diện ghi âm hát STT Tên thành phần Loại Mô tả thành phần Pause Button Tạm ngừng thu âm hát Delete Button Xóa thu âm TimeRemain Label Thời gian lại thu âm Bảng 6.1.2.a Mô tả giao diện ghi âm hát 39 Hình 6.1.2.b Giao diện tạm ngừng ghi âm hát b) Dừng ghi âm STT Tên thành phần Loại Mô tả thành phần Resume Button Tiếp tục thu âm hát Preview Button Preview thu âm Delete Button Xóa thu âm TimeRemain Label Thời gian cịn lại thu âm Bảng 6.1.2.b Mơ tả giao diện dừng ghi âm 40 c) Giao diện Preview Record Hình 6.1.2 c Giao diện preview ghi âm hát STT Tên thành phần Loại Mô tả thành phần Recognize Button Nhận diện hát Download Button Tải thu âm Delete Button Xóa thu âm Pause/Play Button Dừng/Phát thu âm Region Button Chọn vùng muốn nghe From Label Chọn thời gian từ To Label Thời gian tới Bảng 6.1.2.c Mô tả giao diện preview ghi âm 41 Giao diện trang kết Trang kết nhận diện a) Trang trả kết Hình 6.2.1.a Giao diện trả kết nhận diện STT Tên thành phần Loại Mô tả thành phần Time Label Thời gian nhận diện hát Match Label Độ match ghi âm so với sở liệu Play Button Phát nhạc ZingMp3 Button Mở trang MP3 Zing MV Button Mở trang chứa MV Zing Download Button Tải hát Thumb Img Hình ảnh hát Bảng 6.1.2.a Mô tả giao diện giao diện trả kết nhận diện 42 b) Chức phát nhạc Hình 6.2.1.b Giao diện phát hát STT Tên thành phần Loại Mô tả thành phần Player Audio Phát điều kiển audio Title Label Tên hát Artist Label Tên nghệ sĩ Thumb Img Hình ảnh hát s 43 Giao diện trang admin Trang admin a) Trang admin Hình 6.3.1.a Giao diện trang admin STT Tên thành phần Loại Mô tả thành phần Detail Button Hiện chi tiết hát Edit Button Sửa thông tin hát Delete Button Xóa hát Thumb Img Hình ảnh hát Title Label Tên hát Artist Label Tên nghệ sĩ Add Button Thêm hát Bảng 6.3.1.a Mô tả giao diện trang admin 44 b) Chức thêm hát Hình 6.3.2.b Giao diện thêm hát STT Tên thành phần Loại Mô tả thành phần Detail Button Hiện chi tiết hát Edit Button Sửa thông tin hát Delete Button Xóa hát Thumb Img Hình ảnh hát Title Label Tên hát Artist Label Tên nghệ sĩ Add Button Thêm hát Bảng 6.3.1.a Mô tả giao diện thêm hát 45 c) Chức sửa thơng tin hát Hình 6.3.2.c Giao diện sửa thông tin hát STT Tên thành phần Loại Mô tả thành phần UploadThumbnail Button Tải lên hình ảnh hát Edit Button Sửa thông tin hát Cancel Button Hủy thao tác Thumb Img Hình ảnh hát Title Textbox Tên hát Artist Textbox Tên nghệ sĩ Save Button Lưu thông tin Bảng 6.3.2.c Mô tả giao diện sửa thông tin hát 46 Giao diện trang đăng nhập Mô tả chức nhận diện hát Bài tốn nhận diện hát Q trình thu thập liệu - Với toán nhận diện phân loại cần đến lượng liệu lớn để tính tốn tăng độ xác cho thuật toán nhận diện - Việc thu thập phân tích liệu hát khó khăn so với thu thập loại liệu ảnh Vì dung lượng hát thường tương đối lớn so với ảnh thông thường Kèo theo thơng số hát Channels, Loại file Audio, SampleRate, BitsPerSample,… - Sau tìm hiểu nhóm định chọn liệu 805 hát với kích thước gần 27GB - Quá trình thu thập trang ZingMp3 bao gồm bước sau: ❖ Dùng Tool Capture Request từ WebClient tới ZingMp3 để xác định API cần thiết bao gồm: o Lấy thông tin hát: “api/v2/song/get/info” o Lấy file audio hát: “api/v2/song/get/streaming” o Lấy file lyric hát: “api/v2/lyric/get/lyric” o Lấy List hát album: “api/v2/page/get/playlist” ❖ Tạo Signature cho request ❖ Gọi API để lấy liệu từ trang Web ❖ Tiến hành xử lý file audio file text ❖ Đưa file Audio lên cloud để lưu trữ phục vụ cho trình Xác định API cần thiết: - 47 Sử dụng Google Dev Tool để xác định gói request response: Hình 7.2.1 Tool để xác định API - Một số API thu thập được: • API lấy thơng tin hát: “https://zingmp3.vn/api/v2/song/get/info?id=” + SONG_ID + “&ctime=” + CTIME + “&version=1.4.2&sig=” + SIG + “&apiKey=” + API_KEY • API lấy file Audio hát: “https://zingmp3.vn/api/v2/song/get/streaming?id=” + SONG_ID + “&ctime=” + CTIME + “&version=1.4.2&sig=” + SIG + “&apiKey=” + API_KEY • API lấy lyric hát: “https://zingmp3.vn/api/v2/lyric/get/lyric?id=” + SONG_ID + “BGId&ctime=” + CTIME + “&version=1.4.2&sig=” + SIG + “&apiKey=” + API_KEY o API lấy list hát Playlist: 48 “https://zingmp3.vn/api/v2/page/get/playlist?id=” + PLAYLIST_ID + “BGId&ctime=” + CTIME + “&version=1.4.2&sig=” + SIG + “&apiKey=” + API_KEY - Trong tham số: • SONG_ID : ID hát • CTIME: thời gian gửi hát • SIG: Signature request • API_KEY: key tạo mã SIG Hình 7.2.1 Minh họa bước để xác định API Cách tạo Signature cho request Cách tạo mã chứng thực ZingMp3: SIG = Hash512(API_PATH + Hash256(“ctime=” + ctime + “id=” + id + “version=1.4.2”), SECRET_KEY) • Với API_PATH, ví dụ như: /api/v2/song/get/info 49 Gọi API để crawl liệu - Sử dụng Google Colab để tiến hành crawl liệu Vì tính tự động tiện ích trực tiếp đưa vào Google Drive để lưu trữ Hình 7.2.3 Minh họa bước để crawl liệu - LinkGithub: https://github.com/huutri148/crawMusicFromZingMp3 Áp dụng toán nhận diện Kết luận hướng phát triển Ưu điểm 50 - Giao diện Website trực quan, dễ sử dụng đầy đủ thông tin cần thiết - Hỗ trợ đầy đủ chức cho quản trị viên Nhược điểm - Thời gian nhận diện chậm đưa lên Cloud độ trễ truyền file Kết đạt Về mặt nghiên cứu: • Nhóm có hội tìm hiểu nghiên cứu thuật tốn mà cơng ty Shazam, sử dụng • Hiểu áp dụng vào việc xử lý file âm thanh, vấn đề FFT (Fourier Transform) • Tìm hiểu áp dụng công nghệ Web phương pháp xây dựng Project phù hợp Về mặt sản phẩm: • Giao diện trực quan dễ nhìn • Chức dễ sử dụng Hướng phát triển 51 - Phát triển thành ứng dụng nghe nhạc hoàn chỉnh - Thêm chức đề xuất nhạc cho người dùng - Thêm chức nhận diện thể loại nhạc - Tìm hiểu phát triển yếu tố phát quyền nhạc - Hỗ trợ đa tảng Tài Liệu Tham Khảo [1] How Shazam Works: https://www.toptal.com/algorithms/shazam-it-musicprocessing-fingerprinting-and-recognition; [2] Khai thác API ZingMP3: https://viblo.asia/p/zing-mp3-toi-da-khai-thacapi-nhu-the-nao-L4x5xvdaZBM [3] Angular: https://angular.io/ [4] MongoDB: https://mongodb.com/ [5] NAudio: https://github.com/naudio/NAudio 52 ... dùng nhà phát hành nhạc Đó lý nhóm em chọn đề tài Mục tiêu chính: Xây dựng phần mềm Nhận Diện Bài Hát Qua Giai Điệu: + Xây dựng sở liệu lưu trữ hát để giúp đỡ cho việc tìm kiếm hát + Nhận diện tìm... giao diện Giao diện trang nhận diện Giao diện chức nhận diện Hình 6.1.1 Giao diện chức nhận diện STT Tên thành phần Loại Mô tả thành phần Record Button Thực thu âm hát Import Button Import hát. .. 6.3.2.c Mô tả giao diện sửa thông tin hát 46 Giao diện trang đăng nhập Mô tả chức nhận diện hát Bài toán nhận diện hát Quá trình thu thập liệu - Với tốn nhận diện phân loại cần đến lượng liệu lớn