Chào các bạn, trong bài viết này chúng ta sẽ cùng nhau làm ứng dụng nghe nhạc "Music Player" bằng javascript. Chắc trong số chúng ta ai cũng thích nghe nhạc phải không nào, thay vì hằng ngày chúng ta nghe nhạc qua youtube, qua zing mp3, vậy tại sao chúng ta không tự tạo ra một ứng dụng nghe nhạc cơ bản bằng chính khả năng của chúng ta. Có phải sẽ thú vị hơn không 😁😁

Với ứng dụng Music Player chúng ta có thể làm các chức năng đơn giản sau:

  • Play bài hát
  • Pause bài hát
  • Chuyển bài qua lại
  • Tua bài hát
  • ...

Đây là giao diện ứng dụng Music Player ban đầu chúng ta, mình để link source ở đây để các bạn có thể tham khảo : https://github.com/buihien0109/music-player/tree/main/start

Ngoài ra các bạn có thể tạo giao diện ứng dụng theo ý thích và phong cách của mình

demo music player app

Bắt đầu thôi nào 😁😁😁

Hiển thị thông tin bài hát

Mặc định ban đầu chúng ta sẽ hiển thị ra 1 bài hát bất kỳ với tiêu đề, audio và ảnh tương ứng với bài hát đó

const audio = document.getElementById("audio");
const title = document.getElementById("title");
const cover = document.getElementById("cover");

// Tiêu đề bài hát, tương ứng với các file mp3
const songs = ["mot_phut", "hen_yeu", "roi_xa"];

// Lấy index bất kỳ trong mảng songs để hiện thị
let songIndex = 2;

// Load 1 bài hát theo index
loadSong(songs[songIndex]);

// Cập nhật thông tin bài hát
function loadSong(song) {
    title.innerText = song;
    audio.src = `music/${song}.mp3`;
    cover.src = `images/${song}.jpg`;
}

Hiện tại trong project, chúng ta mockup sẵn 3 audio tương ứng là các giá trị trong mảng songs

Function loadSong giúp chúng ta hiển thị thông tin bài hát

Play & Pause

Mặc định ban đầu thì bài hát ở trạng thái "pause", chúng ta sẽ thực hiện click để play audio

Tuy nhiên chúng ta cần phải biết khi nào thì play, khi nào thì pause. Để làm điều này, chúng ta sẽ phụ thuộc vào class "play" trong element "musicContainer"

Định nghĩa 2 function :

  • playSong để phát nhạc
  • pauseSong để tam dừng
const musicContainer = document.getElementById("music-container");
const playBtn = document.getElementById("play");

// Play song
function playSong() {
    musicContainer.classList.add("play");
    playBtn.querySelector("i.fas").classList.remove("fa-play");
    playBtn.querySelector("i.fas").classList.add("fa-pause");

    audio.play();
}

// Pause song
function pauseSong() {
    musicContainer.classList.remove("play");
    playBtn.querySelector("i.fas").classList.add("fa-play");
    playBtn.querySelector("i.fas").classList.remove("fa-pause");

    audio.pause();
}

// Lắng nghe sự kiện
playBtn.addEventListener("click", () => {
    // Kiểm tra xem musicContainer có chứa class "play" hay không?
    const isPlaying = musicContainer.classList.contains("play");

    // Nếu có thì thực hiện pause
    // Nếu không thì thực hiện play
    if (isPlaying) {
        pauseSong();
    } else {
        playSong();
    }
});

Progress song

Theo mặc định là khi chúng ta bắt đầu 1 bài hát mới thì thanh tiến trình (progress bar) bắt đầu chạy, dựa vào progress chúng ta có thể biết được tiến độ phát bài hát. Để làm được điều này, chúng ta lắng nghe sự kiện "timeupdate" của audio element, và gọi hàm xử lý tương ứng là updateProgress.

Sự kiện "timeUpdate" được kích hoạt khi vị trí phát của audio/video bị thay đổi.

Ngoài ra, chúng ta có thể "tua" nhanh bài hát đến 1 vị trí được chỉ định trên thanh progress. Ở đây chúng ta sẽ lắng nghe sự kiện "click" trên progressContainer element để update currentTime của audio

const progress = document.getElementById("progress");
const progressContainer = document.getElementById("progress-container");

// Time/song update
audio.addEventListener("timeupdate", updateProgress);

// Click on progress bar
progressContainer.addEventListener("click", setProgress);

// Update progress bar
function updateProgress(e) {
    const { duration, currentTime } = e.srcElement;
    const progressPercent = (currentTime / duration) * 100;
    progress.style.width = `${progressPercent}%`;
}

// Set progress bar
function setProgress(e) {
    const width = this.clientWidth;
    const clickX = e.offsetX;
    const duration = audio.duration;

    audio.currentTime = (clickX / width) * duration;
}

Next song & Prev song

Một tính năng rất quan trọng trong một ứng dụng "Music Player" là next và prev bài hát. Để làm được điều này chúng ta lắng nghe sự kiện "click" trên 2 nút nextBtn gọi hàm xử lý nextSong để thực hiện next bài hát và nút prevBtn gọi hàm xử lý prevSong để thực hiện prev bài hát

const prevBtn = document.getElementById("prev");
const nextBtn = document.getElementById("next");

// Lắng nghe sự kiện khi next và prev bài hát
prevBtn.addEventListener("click", prevSong);
nextBtn.addEventListener("click", nextSong);

// Lắng nghe sự kiện khi kết thúc bài hát
audio.addEventListener("ended", nextSong);

// Xử lý khi prev bài hát
function prevSong() {
    // Giảm index của songIndex đi 1
    songIndex--;

    // Nếu đang là bài hát đầu thì quay lại bài hát cuối
    if (songIndex < 0) {
        songIndex = songs.length - 1;
    }

    // Cập nhật thông tin của bài hát lên giao diện
    loadSong(songs[songIndex]);

    // Phát nhạc
    playSong();
}

// Xử lý khi next bài hát
function nextSong() {
    // Tăng index của songIndex lên 1
    songIndex++;

    // Nếu đang là bài hát cuối thì quay lại bài hát đầu
    if (songIndex > songs.length - 1) {
        songIndex = 0;
    }

    // Cập nhật thông tin của bài hát lên giao diện
    loadSong(songs[songIndex]);

    // Phát nhạc
    playSong();
}

Và đây là kết quả cuối cùng của chúng ta

kết quả

Vậy là chúng ta đã hoàn thành ứng dụng "Music Player" với các chức năng cơ bản. Hi vọng các bạn thấy bài viết này hữu ích và thú vị 😁😁😁

Phần sources code của bài viết này, các bạn có thể tham khảo tại đây: https://github.com/buihien0109/music-player/tree/main/final

Các bạn có thể tham khảo thêm khóa học này nhé:

  • Javascript căn bản - Tổng hợp 12 game huyền thoại - tại đây.
  • Lập trình Game Javascript (trực tuyến có tương tác) - tại đây.