web nghe nhạc,code website nhạc,code website nghe nhạc,code web nghe nhạc,nghe nhạc cùng nhau,facebook live stream

Ảnh demo (2)

Xem LIVE DEMO

[Mã code 51001]

Source code website nghe nhạc cùng nhau live stream OBS qua Facebook

(1 Đánh giá)

1 1046

Dự án Source code website nghe nhạc cùng nhau live stream OBS qua Facebook là một nền tảng cho phép người xem nghe nhạc trực tuyến qua live stream của mạng xã hội Facebook

Danh mục

Javascript

Thể loại

WebsiteGiải trí

Ngày đăng

16-9-2024

Loại file

Full code

File download

App nghe nhạc cùng nhau qua FB Live.zip [79.2 MB ]

Gửi thông báo lỗi Báo vi phạm bản quyền

Gửi ngay

CAM KẾT TỪ NGƯỜI BÁN

Chức năng đầy đủ và giống demo 100%

Hỗ trợ cài đặt qua Teamview

Dương Tùng Anh (Tunna Duong)

(Hạng vàng)
Xem trang

Source code
1

Đánh giá (1)
5/5

Ngày tham gia
16/9/2024

Giới thiệu dự án

Dự án Source code website nghe nhạc cùng nhau live stream OBS qua Facebook là một nền tảng cho phép người dùng nghe nhạc trực tuyến, kết nối với nhau qua mạng xã hội và trải nghiệm nghe nhạc cùng nhau trong thời gian thực. Người dùng có thể sử dụng OBS để live stream nội dung âm nhạc từ trang web lên Facebook, giúp chia sẻ không gian âm nhạc với bạn bè và cộng đồng.

Mục tiêu của Dự án

Tạo ra nền tảng nghe nhạc trực tuyến: Giúp người dùng dễ dàng tham gia nghe nhạc trực tuyến.
Tích hợp live stream OBS: Kết nối với OBS Studio để live stream nhạc từ website trực tiếp lên Facebook, tạo ra trải nghiệm tương tác hơn với khán giả.
Tăng cường tính cộng đồng: Tạo môi trường cho người dùng chia sẻ âm nhạc, trò chuyện và tương tác trực tiếp với nhau thông qua bình luận và các tính năng live chat.

Chức năng chính

Kết nối với OBS Studio để live stream:
- Hướng dẫn kết nối website với OBS Studio để phát trực tiếp lên Facebook.
- Hỗ trợ tùy chỉnh overlay, cảnh quay, và các thông báo tương tác (ví dụ: người tham gia, lượt thích, bình luận…).
Tính năng chat và tương tác:
- Người xem có thể quản lý danh sách phát nhạc, cho phép thêm, hoặc bỏ qua các bài hát.

Công nghệ Sử dụng

Ngôn ngữ Lập trình: JavaScript, PHP
Frontend Framework: React
Backend Framework: PHP
Cơ sở dữ liệu: MySQL
Live Streaming Tool: OBS Studio
API: YouTube API để tìm kiếm bài hát và lấy thông tin bài hát

Lợi ích

Giao lưu âm nhạc: Tạo không gian nghe nhạc thân mật và gắn kết người nghe với nhau thông qua âm nhạc.
Tăng khả năng tiếp cận: Live stream lên Facebook giúp tiếp cận nhiều người hơn và mở rộng cộng đồng.

XEM THÊM ==> Hướng dẫn cài đặt chi tiết

HÌNH ẢNH DEMO

HƯỚNG DẪN CÀI ĐẶT

Hướng dẫn cài đặt

Setup Client

Mở cmd trong thư mục Client, chạy lệnh npm install
Copy và paste file .env.example, đổi tên thành .env
Truy cập https://console.cloud.google.com, tạo project mới với tên bất kỳ
Bật API YouTube Data v3 và tạo API key mới
Copy key vừa tạo vào file .env phần REACT_APP_TOKEN
Dán link đến file api.php trong phần Setup Server

Setup Server

Bật XAMPP và để port mặc định là 3103
Copy file api.php trong thư mục Server vào thư mục htdocs của XAMPP
Truy cập phpMyAdmin, tạo database mới với tên live_chat
Tiến hành khôi phục database từ file Database.sql
Sửa lại thông tin đăng nhập database trong file api.php
Dán link của server vào phần REACT_APP_API_URL của file .env
Chạy lệnh npm start của Client

OBS Live

Bật OBS Studio và tạo một source Browser mới
Dán link đến Client vào thanh URL (http://localhost:3000)
Chỉnh width và height cho phù hợp với kích thước màn hình
Tick vào ô Control audio via OBS
Để load lại bình luận trực tiếp, ấn vào 24/7 Music Radio trong phần Interact
Truy cập https://facebook.com/live/producer để lấy stream key
Dán key vào OBS Setting
Bắt đầu phát trực tiếp

Facebook Console

Mở video trực tiếp trong Facebook profile (thường là facebook.com/username/videos/xxx)
Mở DevTool F12, vào tab Network
Bấm vào WS để lọc WebSocket rồi tải lại trang
Bấm vào Initiator của dòng chat?region=xxx
Nhấp chuột vào nút đầu dòng return new WebSocket
Tải lại trang và paste đoạn code của file Dán vào console.js vào console của F12
Vào tab Sources và bấm vào mũi tên màu xanh
Test xem đoạn mã hoạt động được chưa bằng cách bình luận thử
Nếu hiện hai dòng Has a comment và Success trong console là hoàn thành