Направете лента за зареждане с React

Добре дошли в този урок за това как да създадете лента за зареждане, която показва текущото време на mp3 файл, който се възпроизвежда с React и Bootstrap. Ще използваме инструмента create-react-app, за да стартираме бързо React приложение. Ще използваме и библиотеката Bootstrap, за да стилизираме нашето приложение.

Да започваме!

1. Първо отворете терминала/командния ред и въведете следната команда:

npx create-react-app my-app

Това ще създаде ново приложение React, наречено my-app.

1. След това отидете в директорията my-app и инсталирайте библиотеката Bootstrap.

npm install bootstrap

1. Отидете във вашия index.js файл и импортирайте листовете със стилове на Bootstrap.

import 'bootstrap/dist/css/bootstrap.min.css';

1. Сега създайте нов компонент, наречен LoadingBar във вашата папка src.

import React from 'react';

class LoadingBar extends React.Component {
    render() {
        return (
            <div>
                // code goes here
            </div>
        );
    }
}
export default LoadingBar;

1. Сега ще създадем HTML за лентата за зареждане. Това ще включва аудио елемент, лента за напредъка и интервал за показване на текущото време.

<audio id="audio" src="sample.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>
<div className="progress">
    <div className="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow={this.state.progress} aria-valuemin="0" aria-valuemax="100" style={{width: `${this.state.progress}%`}}>
        <span className="audio-time">{this.state.currentTime}</span>
    </div>
</div>

1. Сега ще добавим някакво състояние към нашия компонент. Ще ни трябват два елемента: progress и currentTime.

constructor(props) {
    super(props);
    this.state = {
        progress: 0,
        currentTime: '0:00'
    };
}

1. Сега ще добавим логиката за изчисляване на прогреса и текущото време на аудиото. Ще използваме събитието ontimeupdate на аудио елемента, за да извикаме функция всеки път, когато времето на аудиото се промени. След това тази функция ще актуализира състоянието на нашия компонент.

calculateProgress = () => {
    const audio = document.getElementById('audio');
    const duration = audio.duration;
    const currentTime = audio.currentTime;
    const progress = (currentTime / duration) * 100;
    this.setState({
        progress: progress,
        currentTime: this.getTime(currentTime)
    });
}
getTime = (time) => {
    let minutes = Math.floor(time / 60);
    let seconds = Math.floor(time % 60);
    if (seconds < 10) {
        seconds = `0${seconds}`;
    }
    return `${minutes}:${seconds}`;
}
componentDidMount() {
    document.getElementById('audio').addEventListener('timeupdate', this.calculateProgress);
}

1. Накрая ще добавим компонента LoadingBar към нашия компонент App.

import LoadingBar from './LoadingBar';
class App extends React.Component {
    render() {
        return (
            <div className="container">
                <LoadingBar />
            </div>
        );
    }
}

И това е! Вече имаме лента за зареждане, която показва текущото време на mp3 файл, който се възпроизвежда с React и Bootstrap.