Jouer du son en react-js

Question

J'essaie de jouer un son sur react-js mais je n'arrive pas à le faire démarrer. J'ai ma var de son initialisée dans ma reactClass, avant d'obtenir InitialState :

var App = React.createClass({
audio: new Audio('files/audio.mp3'),
getInitialState: function () {
return {
  playSound: false,
   ........
 }
}

Et voici les fonctions que j'ai pour le démarrage et l'arrêt :

   playSound: function() {
if(!this.state.playSound){
    this.setState({
        playSound: true,
    }, function(){
      console.log("play sound 1");
      this.audio.play();
      console.log("play sound 2");
    });
}
},

stopSound: function() {
if(this.state.playSound){
    this.setState({
        playSound: false,
    }, function(){
        console.log("stop sound 1");
        this.audio.pause();
        console.log("stop sound 2");
    });
}
},

Mais je reçois cette réponse :

react-app.js:346 Uncaught (in promise) DOMException: The element has no supported sources.

J'ai essayé avec un fichier .mp3 et .wav, mais il ne démarre pas. Qu'est-ce que je fais de mal ?

! !!! EDIT : J'ai également essayé d'ajouter un élément HTML :

  <audio id="beep" loop>
         <source src="files/ring.wav" type="audio/wav" />
      </audio>

Et avec le démarrage/arrêt suivant :

  playSound: function() {
if(!this.state.playSound){
    this.setState({
        playSound: true,
    }, function(){
      console.log("play sound 1");
      var audioElement = document.getElementById('beep');
      audioElement.setAttribute("preload", "auto");
      audioElement.autobuffer = true;
      audioElement.load();
      audioElement.play();
      console.log("play sound 2");
    });
}
},

stopSound: function() {
if(this.state.playSound){
    this.setState({
        playSound: false,
    }, function(){
        console.log("stop sound 1");
        var audioElement = document.getElementById('beep');
        audioElement.pause();
        console.log("stop sound 2");
    });
}
},

Ensuite, je n'obtiens aucune erreur au démarrage, mais il ne démarre pas. Lorsque j'appuie sur pause, j'obtiens :

Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().

! !!! EDIT2 :

J'ai également remarqué que si je place des boutons, pour jouer le son. Si j'ouvre le gestionnaire de fichiers, que je vais sur mon index.html et que je l'ouvre, cela fonctionne parfaitement. Si j'essaie la page du serveur webpack : localhost:8000/app/index.html, cela ne fonctionne pas. Je reçois la même DOMException.

Answer 1

Après avoir essayé pendant un certain temps, j'ai fait 2 boutons, 1 pour démarrer le son et un pour l'arrêter, dans mon fichier index.html. J'ai donc essayé cela, et j'ai remarqué que cela fonctionne depuis mon gestionnaire de fichiers, mais pas si j'essaie depuis le serveur webpack. Donc j'ai vérifié mes chemins, et au lieu de : "files/audio.mp3" je l'ai changé en "../files/audio.mp3". Une erreur de débutant, mais c'est ce qui arrive quand on fait travailler un développeur Android en javascript :))))