Как загружать собственные mp3-файлы при нажатии в React Player - PullRequest
Новая
       106

Как загружать собственные mp3-файлы при нажатии в React Player

0 голосов
/ 02 августа 2020

Я использую 16 React Player на своем сайте и импортировал 16 различных файлов mp3. Меня беспокоит время загрузки, поэтому я подумал, что это может быть хорошим решением, если файл mp3 загружается только при нажатии кнопки воспроизведения. Возможно ли это, и может ли кто-нибудь дать мне подсказку, как этого добиться?

Это начало кода из моего дома. js компонент: 

import React from 'react';
import ReactAudioPlayer from 'react-audio-player';
import Badge from 'react-bootstrap/Badge';
import mp3_file from '../assets/music/mein_ahnenland_peru_maintheme_titel_torben_jan_mueller.mp3';
import action from '../assets/music/99firefilm2018_torben_jan_mueller_16bit_48khz_v3m_action.mp3';
import adventure from '../assets/music/schmonz_ep2_goldgraeber3_torben_jan_mueller_ueberarbeitet_n_cut.mp3';
import animation from '../assets/music/revolution_radio_torben_jan_mueller_16bit_48khz_final_m.mp3';
import comedy from '../assets/music/99firefilm2018_torben_jan_mueller_16bit_48khz_v3m.mp3';
import doku from '../assets/music/mein_ahnenland_peru_maintheme_titel_torben_jan_mueller.mp3';
import drama from '../assets/music/mein_ahnenland_peru_umweltzerstoerung_torben_jan_mueller.mp3';
import erotic from '../assets/music/02- Carefree.mp3';
import fantasy from '../assets/music/logo_jugendfoerderung_torben_jan_mueller_16bit_48khz_v8_final_master.mp3';
import horror from '../assets/music/13- Searching For Their Friends.mp3';
import lovemovie from '../assets/music/mein_ahnenland_peru_wiedersehen2_torben_jan_mueller.mp3';
import music from '../assets/music/daughterly_trailer_strings.mp3';
import other from '../assets/music/wodka_gorbatschow_plakadiva_torben_jan_mueller_16bit_48khz_v2m.mp3';
import sciencefiction from '../assets/music/block701_crowdfunding_halfbeat_atmo_torben_jan_mueller_16bit_48khz_n.mp3';
import western from '../assets/music/italowestern_suite_torben_jan_mueller_16bit_48khz_vintage1.mp3';

export const Home = () => (
    
            <div className="flex-container">

                <div>
                    <div className="adventure genreHeight">
                        <div className="genreBackground">
                            <h4>Adventure <Badge variant="success">New</Badge></h4>
                        </div>
                        <div className="playerBottom">
                            <ReactAudioPlayer
                                src={adventure}
                                controls
                            />
                        </div>
                    </div>
                    <p>&copy; <a href="https://pixabay.com/de/users/thommas68-2571842/?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=2202910" rel="noopener noreferrer" target="_blank">Iván Tamás</a> - <a href="https://pixabay.com/de/?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=2202910" rel="noopener noreferrer" target="_blank">Pixabay</a></p>
                </div>

И, наконец, снимок экрана страницы:

Скриншот страницы с 16 React Players

1 Ответ

0 голосов
/ 04 августа 2020

Прочитав эту документацию , я нашел решение: вам просто нужно добавить эту строку

preload = "none"

в каждый экземпляр проигрывателя и аудиофайл загружаются только при нажатии кнопки воспроизведения.

Вы можете проверить результат с помощью инструментов Google Chrome dev. Go в Сеть, включите «Отключить кеш» и перезагрузите страницу. Как вы можете видеть на этом скриншоте, предварительно загруженного mp3-файла нет.

Google Chrome dev tools Network

Вот так выглядит игрок: 

<div>
  <ReactAudioPlayer
     src={mp3_file}
     controls
     preload="none"
  />
</div>
...