React.js – Тема 10 – Courses WebSkill

Тема 10. React.js Music Player Частина 2

Створення Музичного плеєра

Новий додаток
Форматування
Файли та папки

Створення React.js додатку, введення команд в консоль
D: або C: - переключення між дисками
cd - переходимо в необхідну вам папку
npx create-react-app назва додатку - створення нового React.js проєкту
npx create-react-app - сама команда створення
назва додатку - назва папки в якій буде додаток
cd назва додатку - переходимо в створену папку

Видаляємо непотрібні файли, чистимо index.js та App.js від непотрібних команд
Видаляємо файли: setupTests.js,repor,WebVitals.js,logo.svg,index.css,App.test.js
З файлу index.js видаляємо такі рядки
import './index.css'; import reportWebVitals from './reportWebVitals'; reportWebVitals();
Та коментарі: // If you want...
З файлу App.js видаляємо import logo from './logo.svg';
Тег <div className="app"> і все що всередині нього

В папці src залишаємо лише такі файли:
App.js, App.css, index.js
Одразу можете створити папку Components - папка для компонентів наших файлів

Скопіюйте стилізацію нижче та замініть її в файлі App.css

/* Playlist */
.playlist {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  max-height: 80vh;
  overflow-y: auto;
}

.song {
  cursor: pointer;
  padding: 15px;
  margin-bottom: 10px;
  background-color: #fff;
  border-radius: 8px;
  transition: background-color 0.3s ease;
  display: flex;
  align-items: center;
  border-left: 5px solid transparent;
}

.song:hover {
  background-color: #e9ecef;
}

.song.active {
  border-left-color: #007bff;
  color: #007bff;
  font-weight: bold;
}

.song-icon {
  margin-right: 15px;
}

.song-name {
  flex: 1;
  color: #343a40;
}

.song-duration {
  color: #6c757d;
}

/* Music Player Container */
.music-player-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f8f9fa;
  background-image: linear-gradient(to bottom, #f8f9fa, #dee2e6);
}

/* Player */
.player {
  text-align: center;
  background-color: #ffffff;
  border-radius: 15px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  padding: 30px;
  margin-left: 10px;
}

.title {
  margin-bottom: 20px;
  color: #007bff;
  font-size: 24px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.current-song {
  margin-top: 20px;
  font-size: 18px;
  color: #333;
}

.controls {
  margin-top: 20px;
}

.control-button {
  margin: 0 10px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  border: none;
  background-color: #007bff;
  color: #fff;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.control-button:hover {
  background-color: #0056b3;
}
.audio-visualizer {
  width: 100%;
  height: 100%;
  background-color: #f8f9fa; /* колір фону */
}

Інформація

Робимо заміну всієї стилізації в файлі App.css на свою, яку копіювали вище

Початок роботи із App.js та іншими файлами

Інформація

Короткий опис: Готовий код Музичного плеєра, із можливістю завантаження плей-листа(декілька аудіо-доріжок), а також візуалізацією їхнього відтворення.
1. Добавити нові компоненти MusicPlayer.js та SongList.js одразу підключіть та виведіть їх в App.js
2. Нижче код кожного із файлів, вставте цей код у свої створені файли.

import React, { useState, useRef, useEffect } from 'react';

import './App.css';

import SongList from './SongList';

const MusicPlayer = () => {

const [songs, setSongs] = useState([]); // Стан для зберігання списку пісень

const [currentSongIndex, setCurrentSongIndex] = useState(0); // Стан для зберігання індексу поточної пісні

const [currentSongName, setCurrentSongName] = useState(''); // Стан для зберігання назви поточної пісні

const audioRef = useRef(null); // Референція на елемент audio

const canvasRef = useRef(null); // Референція на елемент canvas для візуалізації

useEffect(() => {

// Ефект, що викликається при зміні стану songs

// Створення аудіо контексту і аналізатора

const audioContext = new (window.AudioContext || window.webkitAudioContext)();

const analyser = audioContext.createAnalyser();

analyser.fftSize = 256;

const bufferLength = analyser.frequencyBinCount;

const dataArray = new Uint8Array(bufferLength);

const canvasElement = canvasRef.current;

if (!canvasElement) return; // Перевірка, чи елемент canvas існує

const canvasContext = canvasElement.getContext('2d');

const renderFrame = () => {

// Функція для візуалізації аудіо даних

analyser.getByteFrequencyData(dataArray);

canvasContext.clearRect(0, 0, canvasElement.width, canvasElement.height);

const barWidth = (canvasElement.width / bufferLength) * 2.5;

let x = 0;

dataArray.forEach((item, index) => {

const barHeight = item;

const r = barHeight + (25 * (index / bufferLength));

const g = 250 * (index / bufferLength);

const b = 50;

canvasContext.fillStyle = `rgb(${r},${g},${b})`;

canvasContext.fillRect(x, canvasElement.height - barHeight / 2, barWidth, barHeight / 2);

x += barWidth + 1;

});

requestAnimationFrame(renderFrame);

};

const audioElement = audioRef.current;

if (!audioElement || audioElement.src === '') return; // Перевірка, чи елемент audio існує та чи має src

// Підключення аудіо до аналізатора

const source = audioContext.createMediaElementSource(audioElement);

source.connect(analyser);

analyser.connect(audioContext.destination);

renderFrame(); // Початок візуалізації

return () => {

audioContext.close(); // При виході з компонента закриваємо аудіо контекст

};

}, [songs]);

const handleUpload = (e) => {

// Обробник завантаження нових файлів

const files = e.target.files;

const newSongs = Array.from(files).map(file => ({

url: URL.createObjectURL(file), // Створення URL для нового файлу

name: file.name // Зберігання назви файлу

}));

setSongs([...songs, ...newSongs]); // Оновлення списку пісень

};

const selectSong = (index) => {

// Вибір поточної пісні за індексом

setCurrentSongIndex(index);

setCurrentSongName(songs[index].name); // Встановлення назви поточної пісні

};

return (

<h2 className="title">Playlist</h2>

</div>

<h1 className="title">Music Player</h1>

<div className="current-song">{currentSongName}</div>

{songs.length > 0 && songs[currentSongIndex] && (

</>

)}

</div>

);

};

export default MusicPlayer;

import React, { useState, useRef, useEffect } from 'react';
import './App.css';
import SongList from './SongList';

const MusicPlayer = () => {
  const [songs, setSongs] = useState([]); // Стан для зберігання списку пісень
  const [currentSongIndex, setCurrentSongIndex] = useState(0); // Стан для зберігання індексу поточної пісні
  const [currentSongName, setCurrentSongName] = useState(''); // Стан для зберігання назви поточної пісні
  const audioRef = useRef(null); // Референція на елемент audio
  const canvasRef = useRef(null); // Референція на елемент canvas для візуалізації

useEffect(() => {
    // Ефект, що викликається при зміні стану songs

// Створення аудіо контексту і аналізатора
    const audioContext = new (window.AudioContext || window.webkitAudioContext)();
    const analyser = audioContext.createAnalyser();
    analyser.fftSize = 256;
    const bufferLength = analyser.frequencyBinCount;
    const dataArray = new Uint8Array(bufferLength);

const canvasElement = canvasRef.current;
    if (!canvasElement) return; // Перевірка, чи елемент canvas існує

const canvasContext = canvasElement.getContext('2d');

const renderFrame = () => {
      // Функція для візуалізації аудіо даних

analyser.getByteFrequencyData(dataArray);
      canvasContext.clearRect(0, 0, canvasElement.width, canvasElement.height);

const barWidth = (canvasElement.width / bufferLength) * 2.5;
      let x = 0;

dataArray.forEach((item, index) => {
        const barHeight = item;

const r = barHeight + (25 * (index / bufferLength));
        const g = 250 * (index / bufferLength);
        const b = 50;

canvasContext.fillStyle = `rgb(${r},${g},${b})`;
        canvasContext.fillRect(x, canvasElement.height - barHeight / 2, barWidth, barHeight / 2);

x += barWidth + 1;
      });

requestAnimationFrame(renderFrame);
    };

const audioElement = audioRef.current;
    if (!audioElement || audioElement.src === '') return; // Перевірка, чи елемент audio існує та чи має src

// Підключення аудіо до аналізатора
    const source = audioContext.createMediaElementSource(audioElement);
    source.connect(analyser);
    analyser.connect(audioContext.destination);
    renderFrame(); // Початок візуалізації

return () => {
      audioContext.close(); // При виході з компонента закриваємо аудіо контекст
    };
  }, [songs]);

const handleUpload = (e) => {
    // Обробник завантаження нових файлів
    const files = e.target.files;
    const newSongs = Array.from(files).map(file => ({
      url: URL.createObjectURL(file), // Створення URL для нового файлу
      name: file.name // Зберігання назви файлу
    }));
    setSongs([...songs, ...newSongs]); // Оновлення списку пісень
  };

const selectSong = (index) => {
    // Вибір поточної пісні за індексом
    setCurrentSongIndex(index);
    setCurrentSongName(songs[index].name); // Встановлення назви поточної пісні
  };

return (
    <div className="music-player-container">
      <div className="playlist">
        <h2 className="title">Playlist</h2>
        <SongList songs={songs} currentSongIndex={currentSongIndex} onSelectSong={selectSong} />
        <input type="file" accept="audio/*" multiple onChange={handleUpload} />
      </div>
      <div className="player">
        <h1 className="title">Music Player</h1>
        <div className="current-song">{currentSongName}</div>
        {songs.length > 0 && songs[currentSongIndex] && (
          <>
            <canvas ref={canvasRef} className="audio-visualizer" width="800" height="200" />
            <audio controls autoPlay ref={audioRef} src={songs[currentSongIndex].url} className="audio-player" />
          </>
        )}
      </div>
    </div>
  );
};

export default MusicPlayer;

Скріншоти усіх файлів в нашому додатку

Створення Музичного плеєра

Інформація

Як елемент допомоги, можна використати штучний інтелект, такий як ChatGPT або його аналоги.
Також, при виникненні помилок - можна консультуватись із штучним інтелектом
Зверніть увагу, що готовий код, який є в теорії спеціально зроблений з помилкою, яка буде Вам заважати удосконалювати та виконувати завдання зазначені нижче, тому найкращим варіантом буде для початку звернутись до штучного інтелекту для виправлення помилки.

Завдання

Завдання 1
Завдання 2
Завдання 3
Завдання 4

Додайте відображення інформації про поточну пісню, таку як автор, жанр, тривалість тощо.
Реалізуйте можливість редагування метаданих пісні (назва, автор тощо).

Управління плейлистом:
Додайте можливість створення, редагування та видалення плейлистів.
Реалізуйте функціонал перетягування та впорядкування пісень у плейлисті.

Оптимізуйте інтерфейс для мобільних пристроїв, можливо, додайте спеціальний мобільний режим.
Забезпечте сумісність з екранами різних розмірів та орієнтацій.

Додайте можливість ділитися плейлистами чи піснями з друзями через соціальні мережі.
Реалізуйте можливість коментувати та оцінювати пісні.

Додаткові завдання

Завдання 1
Завдання 2
Завдання 3

Додайте можливість змінювати налаштування відтворення, такі як еквалайзер, ефекти звуку тощо.
Реалізуйте можливість зберігання користувацьких налаштувань.

Додайте можливість відтворення, паузи, перемотування, зміни гучності тощо.
Реалізуйте можливість перегортування пісень у плейлисті з використанням кнопок попередньої та наступної пісні.

Додайте можливість вибору різних типів візуалізації, таких як спектрограма, вейвформа тощо.
Реалізуйте анімації для візуалізації, наприклад, зміна кольорів або розмірів при зміні музичних параметрів.

Слідкуйте за нами:

Тема 10. React.js Music Player Частина 2

Створення Музичного плеєра

Скопіюйте стилізацію нижче та замініть її в файлі App.css

Початок роботи із App.js та іншими файлами

Скріншоти усіх файлів в нашому додатку

Створення Музичного плеєра

Завдання

Додаткові завдання

Посилання на пройдені теми