title: How to load self hosted mp3 files on click in React Player
body: <p>I use 16 React Players on my site and imported 16 different mp3 files. I´m worried about the loading time, so I thought it might be a good solution, if the mp3 file is only loaded, when the play button is clicked. Is this possible and can anyone give me a hint how to achieve this?</p>
  <p>This is the beginning of the code from my Home.js component:</p>
  <pre><code>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 = () =&gt; (
      
              &lt;div className=&quot;flex-container&quot;&gt;
  
                  &lt;div&gt;
                      &lt;div className=&quot;adventure genreHeight&quot;&gt;
                          &lt;div className=&quot;genreBackground&quot;&gt;
                              &lt;h4&gt;Adventure &lt;Badge variant=&quot;success&quot;&gt;New&lt;/Badge&gt;&lt;/h4&gt;
                          &lt;/div&gt;
                          &lt;div className=&quot;playerBottom&quot;&gt;
                              &lt;ReactAudioPlayer
                                  src={adventure}
                                  controls
                              /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;p&gt;&amp;copy; &lt;a href=&quot;https://pixabay.com/de/users/thommas68-2571842/?utm_source=link-attribution&amp;amp;utm_medium=referral&amp;amp;utm_campaign=image&amp;amp;utm_content=2202910&quot; rel=&quot;noopener noreferrer&quot; target=&quot;_blank&quot;&gt;Iván Tamás&lt;/a&gt; - &lt;a href=&quot;https://pixabay.com/de/?utm_source=link-attribution&amp;amp;utm_medium=referral&amp;amp;utm_campaign=image&amp;amp;utm_content=2202910&quot; rel=&quot;noopener noreferrer&quot; target=&quot;_blank&quot;&gt;Pixabay&lt;/a&gt;&lt;/p&gt;
                  &lt;/div&gt;
  </code></pre>
  <p>And finally a screenshot of the page:</p>
  <p><a href="https://i.stack.imgur.com/WFJjY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WFJjY.png" alt="Screenshot of page with 16 React Players" /></a></p>