React.jsとHTML5 Webオーディオのjavascript APIを使用してmp3プレーヤーを作成しています。ローカルホストのReactアプリケーションでHTML5オーディオが再生されません。

Question

私はちょうど2週間Reactを学んできたので、私は構造や設定（コンポーネントなど）に慣れていますが、JavaScriptで数年の経験があります。

ブラウザ内でReactを使用すると、mp3プレーヤーが動作していました。私。私はindex.htmlファイルを持っていたし、私は次のようにスクリプトを反応させるのが含ま：

<script src="js/react.min.js"></script> 
<script src="js/react-dom.min.js"></script> 
<script src="js/browser.min.js"></script> 

を今、私は、コマンドラインを使用して反応させ、アプリを構築することに慣れるしたいとlocalhostのように私は使用するためにコードを書き換える開始しましたこの環境内で 私は次のようにスケルトンアプリケーションを作成することで始まっ：

create-react-app my-app 
cd my-app/ 
npm start 

その後、私は私自身のコンポーネントで追加などを アプリケーションがローカルホスト上で正しく表示されます。オーディオファイルは、この中で演奏していないようですが3000環境。問題がローカルホストで動作していないHTML5オーディオに直接関係しているのか、それとも別のものであるのかどうかは不明です。 エラーは返されません。

オーディオ要素を動作させることができるかどうかを確認するために、私は自分のコードを簡略化し、mp3ファイルのディレクトリをオーディオタグ（AudioPlayerコンポーネントを参照）にハードコードしました。

私が見逃していることがありますか？おかげ

アプリケーションコンポーネント

import React, { Component } from 'react'; 
    import Header from './Header'; 

    import AudioPlayer from './AudioPlayer'; 

    import Controls from './Controls'; 

    import './music-player.css'; 
    import './css/font-awesome.css'; 


    class App extends Component { 

     //This class is the main component of the application. 
     //it contains the header, the audio player and the side panel components. 
     constructor(props) { 
       super(props); 
       this.state = { 
       sidePanelIsOpen: false, 
       currentSoundIndex: 0, 
       isPlaying: false, 
       playerDuration: 0, 
       currentTime: "0:00", 
       currentWidthOfTimerBar: 0, 
       backButtonIsDisabled: false, 
       forwardButtonIsDisabled: false, 
       playButtonIsDisabled: false 


      }; 
      this.toggleSidePanel = this.toggleSidePanel.bind(this); 

     } 
     componentDidMount() { 
      this.player = document.getElementById('audio_player'); 
      this.player.load(); 
      this.player.play(); //this is not doing anything 
     } 
     toggleSidePanel(){ 
      var sidePanelIsOpen = this.state.sidePanelIsOpen; 
      this.setState({sidePanelIsOpen: !sidePanelIsOpen}) 
     } 


     render() { 


      return(<div> 
       <div id="main-container" className={this.state.sidePanelIsOpen === true ? 'swipe-left' : ''}> 
       <div className="overlay"> 

       <AudioPlayer sounds={this.props.sounds} currentSoundIndex={this.state.currentSoundIndex} /> 
       </div> 
       </div> 


       <div id="side-panel-area" className="scrollable">  
        <div className="side-panel-container"> 
        <div className="side-panel-header"><p>Menu</p></div> 

        </div> 
       </div> 
       </div> 
      ); 
     } 

    } 

    export default App; 

AudioPlayerコンポーネント

import React, { Component } from 'react'; 
    import './music-player.css'; 

    const AudioPlayer = function(props) { 
     var mp3Src = props.sounds[props.currentSoundIndex].mp3; 
     console.log(mp3Src); //this is returning the correct mp3 value 
      return (<audio id="audio_player"> 
      <source id="src_mp3" type="audio/mp3" src="sounds/0010_beat_egyptian.mp3" /> 
      <source id="src_ogg" type="audio/ogg" src=""/> 
      <object id="audio_object" type="audio/x-mpeg" width="200px" height="45px" data={mp3Src}> 
       <param id="param_src" name="src" value={mp3Src} /> 
       <param id="param_src" name="src" value={mp3Src} /> 
       <param name="autoplay" value="false" /> 
       <param name="autostart" value="false" /> 
      </object> 
      </audio>  
      ); 

    } 

    export default AudioPlayer; 

index.js

私はmp3ファイルをインポートする必要があることを発見した実験いくつかの後

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './App'; 
import registerServiceWorker from './registerServiceWorker'; 
import './music-player.css'; 

var sounds = [{"title" : "Egyptian Beat", "artist" : "Sarah Monks", "length": 16, "mp3" : "sounds/0010_beat_egyptian.mp3"}, 
     {"title" : "Euphoric Beat", "artist" : "Sarah Monks", "length": 31, "mp3" : "sounds/0011_beat_euphoric.mp3"}, 
     {"title" : "Latin Beat", "artist" : "Sarah Monks", "length": 59, "mp3" : "sounds/0014_beat_latin.mp3"}, 
     {"title" : "Pop Beat", "artist" : "Sarah Monks", "length": 24, "mp3" : "sounds/0015_beat_pop.mp3"}, 
     {"title" : "Falling Cute", "artist" : "Sarah Monks", "length": 3, "mp3" : "sounds/0027_falling_cute.mp3"}, 
     {"title" : "Feather", "artist" : "Sarah Monks", "length": 6, "mp3" : "sounds/0028_feather.mp3"}, 
     {"title" : "Lose Cute", "artist" : "Sarah Monks", "length": 3, "mp3" : "sounds/0036_lose_cute.mp3"}, 
     {"title" : "Pium", "artist" : "Sarah Monks", "length": 3, "mp3" : "sounds/0039_pium.mp3"}]; 

ReactDOM.render(<App sounds={sounds} />, document.getElementById('root')); 

registerServiceWorker(); 

Answer 1

（importを使用して）この環境内で再生できるようにするためです。

だから私は、（完璧に動作している）解決策を見つけ、次のように私のAudioPlayerコンポーネントを編集した：

import React, { Component } from 'react'; 
import './music-player.css'; 
import mp3_file from './sounds/0010_beat_egyptian.mp3'; 

const AudioPlayer = function(props) { 

     return (<audio id="audio_player"> 
     <source id="src_mp3" type="audio/mp3" src={mp3_file}/> 
     <source id="src_ogg" type="audio/ogg" src=""/> 
     <object id="audio_object" type="audio/x-mpeg" width="200px" height="45px" data={mp3_file}> 
      <param id="param_src" name="src" value={mp3_file} /> 
      <param id="param_src" name="src" value={mp3_file} /> 
      <param name="autoplay" value="false" /> 
      <param name="autostart" value="false" /> 
     </object> 
     </audio>  
     ); 

} 
export default AudioPlayer; 

Answer 2

試してみてください。

import React, { Component } from 'react'; 
import mp3_file from './sounds/0010_beat_egyptian.mp3'; 

const AudioPlayer = function(props) { 
    return (
    <audio src={mp3_file} controls autoPlay/> 
); 
} 
export default AudioPlayer;