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

Тема 9. React.js Music Player Частина 1

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

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

Створення 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

Інформація

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

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

Інформація

1. Створити папку components та добавити нові компоненти MusicPlayer.js одразу підключіть та виведіть їх в App.js
2. Нижче код кожного із файлів, вставте цей код у свої створені файли.

import React, { Component } from 'react';

class MusicPlayer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isPlaying: false,
      currentTime: 0,
      duration: 0
    };
    this.audioPlayer = React.createRef();
  }

componentDidMount() {
    // Отримання тривалості аудіофайла
    this.audioPlayer.current.addEventListener('loadedmetadata', () => {
      this.setState({ duration: this.audioPlayer.current.duration });
    });

// Оновлення часу відтворення
    this.audioPlayer.current.addEventListener('timeupdate', () => {
      this.setState({ currentTime: this.audioPlayer.current.currentTime });
    });
  }

togglePlayPause = () => {
    this.setState(prevState => ({
      isPlaying: !prevState.isPlaying
    }), () => {
      this.state.isPlaying ? this.audioPlayer.current.play() : this.audioPlayer.current.pause();
    });
  };

handleSeekBarChange = event => {
    const currentTime = parseFloat(event.target.value);
    this.setState({ currentTime });
    this.audioPlayer.current.currentTime = currentTime;
  };

render() {
    const { isPlaying, currentTime, duration } = this.state;

return (
      <div>
        <audio ref={this.audioPlayer} src={this.props.audioSrc} />
        <button onClick={this.togglePlayPause}>
          {isPlaying ? 'Пауза' : 'Відтворити'}
        </button>
        <input
          type="range"
          min={0}
          max={duration}
          value={currentTime}
          onChange={this.handleSeekBarChange}
        />
        <div>Час: {currentTime.toFixed(2)} сек</div>
        <div>Тривалість: {duration.toFixed(2)} сек</div>
      </div>
    );
  }
}

export default MusicPlayer;

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

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

Завдання 1

Інформація

Додати можливість вибору аудіофайлів для відтворення через інтерфейс користувача

Завдання 2

Інформація

Реалізувати відображення прогресу відтворення аудіофайлу. Щоб відображати прогрес відтворення аудіофайлу, нам потрібно оновлювати прогрес нашого seek bar при зміні часу відтворення аудіофайлу. Оновлення seek bar відбуватиметься кожного разу, коли відбувається подія 'timeupdate' у нашому аудіоелементі.

Завдання 3

Інформація

Додайте можливість завантаження та відтворення плейлистів з декількох аудіофайлів.

Завдання 4

Інформація

Додайте регулятор гучності, щоб користувачі могли контролювати гучність аудіо.
Щоб додати регулятор гучності, можна використати тег <input> типу range, який буде змінювати гучність аудіоплеєра.

Завдання 5

Інформація

Дозвольте користувачеві змінювати швидкість відтворення аудіофайлу (наприклад, повільне відтворення або прискорене відтворення).
Для додавання можливості зміни швидкості відтворення аудіофайлу ми можемо також використовувати регулятор, аналогічний регулятору гучності, але замість зміни від 0 до 1, змінювати швидкість можна у широкому діапазоні.

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

Інформація

1. Удоскональте стилізацію та інтерфейс користувача
2. Добавте можливість візуалізації програвання музики

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

Тема 9. React.js Music Player Частина 1

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

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

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

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

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

Завдання 1

Завдання 2

Завдання 3

Завдання 4

Завдання 5

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

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