title: How can I create an audio progress bar in React?
body: <p>How can I create Audio progress bar in React JS ?
  I have an audio list and they are playing successfully but they are not showing the progress of the audio.</p>
  
  <p>I have the duration of audios too.</p>
  
  <p>Code of my songs array - </p>
  
  <pre><code>const songs = [
        {
          song1: "http://streaming.tdiradio.com:8000/house.mp3",
          desc: "01. Clouds In The Forest",
          time: "3:20"
        },
        {
          song1: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3",
          desc: "02. Rat In The River",
          time: "2:48"
        },
        {
          song1: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3",
          desc: "03. Giants And Companions",
          time: "2:27"
        },
        {
          song1: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3",
          desc: "04. Ashamed Of Light",
          time: "3:32"
        },
        {
          song1: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-4.mp3",
          desc: "05. Doubting The Forest",
          time: "2:40"
        },
        {
          song1: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-5.mp3",
          desc: "06. Criminals Of The Lake",
          time: "2:55"
        }
      ];
  </code></pre>
  
  <p>Code for Audio list is -</p>
  
  <pre><code>{songs.map(song =&gt; (
                  &lt;div className="row" style={{ color: "#827474" }}&gt;
                    &lt;div className="col-md-7"&gt;
                      &lt;a
                        style={{ cursor: "pointer", display: "inline-flex" }}
                        getdesc={song.desc}
                        gettime={song.time}
                        id={song.song1}
                        key={song.song1}
                        onClick={this.togglePlay}
                      &gt;
                        {this.state.currentSong !== song.song1 ||
                        !this.state.play ? (
                          &lt;img
                            src={playbutton}
                            className="img-responsive img-new"
                            alt="Image"
                          /&gt;
                        ) : (
                          &lt;img
                            src={pausebutton}
                            className="img-responsive img-new"
                            alt="Image"
                          /&gt;
                        )}
                        &amp;nbsp;&amp;nbsp;&amp;nbsp;
                        {song.desc}
                      &lt;/a&gt;
                    &lt;/div&gt;
                    &lt;div className="col-md-3"&gt;
                      &lt;p&gt;..................................&lt;/p&gt;
                    &lt;/div&gt;
                    &lt;div className="col-md-2"&gt;
                      &lt;p&gt;{song.time}&lt;/p&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                ))}
  </code></pre>
  
  <p>Code for togglePlay is  - </p>
  
  <pre><code>audio = null;
  
    togglePlay = e =&gt; {
      const song = e.target.id;
      var getdesc = e.target.getAttribute("getdesc");
      var gettime = e.target.getAttribute("gettime");
      console.log(getdesc);
      this.setState({ finaltext: getdesc, finaltime: gettime });
      if (this.state.currentSong === song) {
        this.state.play ? this.audio.pause() : this.audio.play();
        this.setState({ play: !this.state.play });
      } else {
        if (this.audio) {
          this.audio.pause();
        }
  
        this.setState({
          currentSong: song,
          play: true
        });
        this.audio = new Audio(song);
        this.audio.play();
      }
    };
  </code></pre>
  
  <p>How can I show the progress of the audio in my component ?</p>