Как сгенерировать код встраивания для индивидуального аудиоплеера, разработанного на React + CSS

Question

Я пытался найти способ сгенерировать код встраивания для индивидуального аудиоплеера, чтобы мои пользователи могли просто скопировать и вставить код на свой веб-сайт, чтобы аудиоплеер работал.

Вот AudioPlayer. js файл:

import React, { Component } from 'react';
// import "./audioplayer.css";
import playicon from "./play.png";
import pauseicon from "./pause.png";
import { GithubPicker  } from 'react-color';


class AudioPlayer extends Component {
  constructor(props){
    super(props);
    this.state ={
      music_name:"https://www.soundhelix.com/examples/mp3/SoundHelix-Song-8.mp3",
      isPlaying:false,
      song:new Audio(),
      play_img:null,
      range:null,
      total_time:0,
      currentTime:0,
      background: '#fff',
      isemailchacked:true,
      chacked:true,
    };
  }

  componentDidMount(){
    this.state.song.src = this.state.music_name;
    console.log(this.state.song);
    this.setState({play_img:document.querySelector("#play_img"),
    range:document.querySelector("#range1")});
    const {song ,range, play_img , total_time,currentTime} = this.state;

  }
  play = () =>{

      const {song ,range, isPlaying, play_img , total_time,currentTime} = this.state;
      console.log(this.state.isPlaying);
      if(!this.state.isPlaying){
        console.log("In play state");
        this.state.song.play();
        this.setState({
        isPlaying:true
      })
      console.log(song.duration);
      console.log(typeof range);
        this.state.total_time =song.duration;
        console.log(total_time);
        range.max = song.duration;
        console.log(range.max);
        play_img.src = pauseicon;
      }else{
        this.state.song.pause();
        this.setState({
            isPlaying:false
        })             
      play_img.src = playicon;
      }
      var self=this;
      song.addEventListener('ended',function(){
        song.currentTime = 0
        song.pause();
        self.setState({
          isPlaying:false
        })  
        range.value = 0;
        play_img.src = playicon;
    })
      song.addEventListener("timeupdate", function () {
        range.value = song.currentTime;
        })
        range.addEventListener('change',function(){
          console.log(range.value);
          song.currentTime = range.value;
      })
  }

  handleChangeComplete = (color) => {
    this.setState({ background: color.hex });
  };

  handleChecked = () => {

    this.setState({chacked: !this.state.chacked});
  }
  handleEmailChecked = () =>{

    this.setState({isemailchacked: !this.state.isemailchacked});

  }
  render() {
    const isLoggedIn = this.state.isShareCheckBox;
    return (
      <div className="container-vishv">
      <div  >

      <div className="abc" style={{borderColor:this.state.background}} >

        <h5 style={{float:"right",marginRight:"8px",opacity:0.5}}>By Listnr</h5>
        <br/>

        <div className="audio_wrapper">
            <div className="buttons">
                    <button id="play" 
                    style={{borderColor:this.state.background}}
                    onClick={()=>this.play()}> <img id="play_img" src={playicon} /></button>
                    <input id="range1" className="level" 
                    style={{background:this.state.background}}
                    type="range" min="0" max="" defaultValue="0" step="1"/>
            </div>
        </div>

        <div class="form-group row">

            <div class="col-sm-1  ">

            </div>
            <div class="col-sm-4">
              <p  style={ this.state.isemailchacked ? { display:'block'} : {display : 'none'} }>
              <input type="Email" className="form-control" style={{borderColor:this.state.background}} id="inputPassword" placeholder="Email" />
              </p>
            </div>
            <div class="col-sm-1">
            <p  style={ this.state.isemailchacked ? { display:'block'} : {display : 'none'} }>
            <button className="btn btn-primary mb-2" style={{borderColor:this.state.background}} >Subscribe</button>
            </p>
            </div>

            <div class="col-sm-2">
              <ul  className="socialicons"  style={ this.state.chacked ? { display:'block'} : {display : 'none'} }  >
                <li><a href="#" claclassName="icoRss" title="Rss"><i className="fa fa-2x fa-rss"></i></a></li>
                <li><a href="#" className="icoFacebook" title="Facebook"><i className="fa fa-2x fa-facebook"></i></a></li>
                <li><a href="#" className="icoTwitter" title="Twitter"><i className="fa fa-2x fa-twitter"></i></a></li>
                <li><a href="#" className="icoLinkedin" title="Linkedin"><i className="fa fa-2x fa-linkedin"></i></a></li>
              </ul>

            </div>
        </div>
        </div>
      <div className="container1" >
      <form>
          <div class="form-group row">
          <label for="staticEmail" class="col-sm-4 col-form-label">Select Music Player Color:</label>
            <div class="col-lg-2">
                      <GithubPicker
                      className="skhpkr"
                      color={ this.state.background }
                      onChangeComplete={ this.handleChangeComplete } />
            </div>
          </div>
          <div class="custom-control custom-checkbox">
          <input type="checkbox"
          onChange={ this.handleChecked }
          defaultChecked={this.state.chacked}
           class="custom-control-input" id="defaultChecked2"  />
          <label class="custom-control-label" for="defaultChecked2">Enable Share Buttons  </label>
          <small class="text-muted checkboxptag">Add Share Buttons On The Audio Player So You Can Share The Audio</small>
        </div>
        <br />
        <div class="custom-control custom-checkbox">
          <input type="checkbox"
          onChange={ this.handleEmailChecked }
          defaultChecked={this.state.isemailchacked}
           class="custom-control-input" id="defaultChecked3"  />
          <label class="custom-control-label" for="defaultChecked3">Enable Email Subscription   </label>
          <small class="text-muted checkboxptag">Allow Readers to Sign Up For Future Articles</small>
        </div>
        </form>
   </div>
   </div>
   </div>
    );
  }
};

export default AudioPlayer;

А вот и аудиоплеер. css файл:

@import url('https://fonts.googleapis.com/css2?family=Nunito&family=Nunito+Sans&display=swap');
*{
    margin: 0;
    padding: 0;
    outline: 0;
}
body{
    background-color: #E1E6EC;
}
.container1{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    padding: 6px;
    width: 800px;
    border-radius: 8px;
    background-color: #E1E6EC;
    box-shadow: 5px 5px 11px #A2B1C6 , -5px -5px 11px  #fff  ;
    text-align: center;
    font-family: 'Nunito', sans-serif;

}
.wrapper{
    position: relative;
}
.container img{
    width: 80%;

}
.container h1{
    font-size: 1.5rem;
    margin: 12px 0 12px 0;
}
.buttons{
    display: inline-block;
    width: 100%;
    padding: 0;
    margin: 0;
    text-align: center;
}
.buttons button{
    position: relative;
    width: 50px;
    height: 50px;
    padding: 16px;
    border-radius: 90px;
    background-color: #E1E6EC;
    text-align: left;
    margin: 10px 9px;
    border: none;
    box-shadow: 2px 2px 5px #A2B1C6 , -2px -2px 11px  #fff  ;

}
.buttons button:active{
    background: #E1E6EC;
    box-shadow: inset 2px 2px 5px #A2B1C6 , -2px -2px 11px  #fff  ;
}
.buttons button img{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 42%;
    height: 42%;
}

.level{
    width: 80%;
    -webkit-appearance: none;
    appearance: none;
    background: #E1E6EC;
    box-shadow: 2px 2px 5px #A2B1C6 , -2px -2px 11px  #fff  ;
    border-radius: 50px;
    margin: 12px 0;
    background-color: red;
}
.level::-webkit-slider-thumb{
    -webkit-appearance: none;
    background-color: #A2B1C6;
    box-shadow: 2px 2px 5px #A2B1C6 , -2px -2px 5px  #fff  ;
    width: 15px; /* Set a specific slider handle width */
    height: 15px; /* Slider handle height */
    border-radius: 90px;
}
.level::-moz-range-thumb{
    width: 50px;
    height: 50px;
}

Аудиоплеер будет воспроизводить индивидуальный звук, созданный для каждого пользователя .

Любая помощь приветствуется.