import React, { Component } from 'react';

class RingtonePlayer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      src: './ringtone/Tassel-Cymophane.mp3', // the path related to "public/index.html"
      shouldPlay: props.shouldPlay
    };
  }

  componentWillReceiveProps(nextProps) {
    this.setState({shouldPlay: nextProps.shouldPlay}, () => {
      let audio = document.querySelector('audio');
      if (this.state.shouldPlay) {
        if (audio.currentTime !== 0) {
          audio.currentTime = 0;
        }
        audio.play();
      } else {
        audio.pause();
      }
    });
  }

  render() {
    return (
      <div className="ringtong-player">
        <audio src={this.state.src} loop preload></audio>
      </div>
    );
  }
}

export default RingtonePlayer;
@@ -734,16 +734,49 @@
  %3Caudio 
+loop preload%3E%0D%0A          %3Csource 
 src=%7Bthi
@@ -788,29 +788,28 @@
 te.src%7D 
-loop preload%3E
+/%3E%0D%0A        
 %3C/audio%3E

change <audio></audio>