로컬 호스트의 React 앱에서 HTML5 오디오가 재생되지 않습니다.

Question

React.js와 HTML5 웹 오디오 자바 스크립트 API를 사용하여 mp3 플레이어를 만들고 있습니다. 나는 2 주 동안 React를 배웠다. 그래서 나는 구조와 설정 (컴포넌트 등)에 익숙해졌지만 JavaScript로 수년간의 경험이있다.

브라우저 내에서 React를 사용할 때 mp3 플레이어가 작동했습니다. 나는. 내가 사용하는 코드를 다시 작성하기 시작

이제

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

싶습니다 명령 줄 및 로컬 호스트를 사용하여 반작용 응용 프로그램을 구축에 익숙해 : 나는 index.html 파일을했고 나는 다음과 같이 스크립트 반응 포함 이 환경 내에서. 오디오 파일이 재생 될하지 않는 것 그러나 3000 :

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

가 그럼 난 등 응용 프로그램은 로컬 호스트에 제대로 표시되어 내 자신의 구성 요소에 추가 : 나는 다음과 같이 골격 응용 프로그램을 만드는 것에 의해 시작 환경. 문제가 localhost에서 작동하지 않는 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;