HTML5 音频未在本地主机的 React 应用程序中播放

Posted 2023-02-25

【中文标题】HTML5 音频未在本地主机的 React 应用程序中播放

【英文标题】：HTML5 audio is not playing in my React app in localhost

【发布时间】：2017-10-22 14:51:50

【问题描述】：

我正在使用 React.js 和 html5 网络音频 javascript API 制作一个 mp3 播放器。我刚刚学习 React 两个星期，所以我刚刚习惯了结构和设置（使用组件等）但是有几年的 JavaScript 经验。

在浏览器中使用 React 时，我的 mp3 播放器可以正常工作。 IE。我有一个 index.html 文件，并包含以下 React 脚本：

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

现在我想习惯于使用命令行和 localhost 构建 React 应用程序，因此我开始重写代码以在此环境中使用。 我从创建骨架应用程序开始，如下所示：

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

然后我添加了我自己的组件等。 该应用程序在 localhost:3000 上正确显示，但音频文件似乎没有在此环境中播放。我不确定问题是否与 HTML5 音频直接相关，只是无法在 localhost 中工作，还是其他原因。 没有返回错误。

我已经简化了我的代码，并将 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;

音频播放器组件

    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"   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

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();

【问题讨论】：

您可以将错误事件处理程序附加到您的音频标签吗？在原始 JavaScript 中，这将是：document.getElementById("audio_player").addEventListener("error", function(e) console.error(e); ); 至少您可以调试它以查看是否生成了任何错误。

@TheJim01 谢谢我刚刚尝试添加，但它没有返回错误。另一件事，当我访问 localhost:3000/sounds/0010_beat_egyptian.mp3 时，我原以为 mp3 会在这个 url 上播放，但它只显示主应用程序页面。但是，当我在浏览器中构建应用程序（即使用 index.html 文件）时，我可以通过访问它们的 url 来播放声音文件，如下所示：file:///C:/nodejs/sarah_music_app/sounds/0010_beat_egyptian.mp3 ..这是否意味着这些文件可能无法在 localhost 上播放？

@TheJim01 好的，所以我发现了一些东西。我尝试在 AudioPlayer 组件的顶部导入 mp3 文件，例如从'./sounds/0010_beat_egyptian.mp3'导入mp3_file；然后将其作为音频标签的源插入如下 src=mp3_file 并且现在可以正常工作了。所以我将尝试这个想法并导入其余的声音。也许有一种更有效的方法，但这暂时可以。感谢您的帮助。

关于localhost:3000/sounds/0010_beat_egyptian.mp3，我希望和你一样。您使用哪种服务器托管localhost:3000？如果它是 React 原生的东西，那么我想它可能会决定显示主应用程序。也就是说，我很高兴你找到了解决方案。请考虑将其添加为答案并接受它，以便其他人可以看到您的问题已解决。

@TheJim01 是的，它必须是本机反应。整理后我确实会上传解决方案:) 感谢您的帮助

【参考方案1】：

经过一些实验，我发现需要导入 mp3 文件（使用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"   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;

【参考方案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;

【讨论】：

是的。这就是我所做的，正如您希望从我今天发布的答案中看到的那样。谢谢。知道如何将一组 mp3 文件（而不仅仅是一个）导入变量吗？即类似：从'./sounds'导入mp3_files； （其中 mp3_files 是一个零索引数组..）.. 我无法弄清楚正确的语法谢谢。

嗨莎拉，一种方法是在“./sounds”文件夹中添加一个“index.js”。让我用一个例子来更新我的答案。欢呼

哦，太好了，谢谢。也许您可以将其发布为该问题的答案，因为它更具体？谢谢...***.com/questions/44155878/…

hmmm... 恐怕这会使其成为原始问题的错误答案。也许我们可以为此做一个要点:)

实际上你能告诉我代码中到底发生了什么吗？我们是否将 JSON 数据存储到一个名为 mp3_files 的变量中？因为我想存储在 mp3_files 中的是 mp3 文件本身，而不是 JSON 数据，如果你得到我的话？谢谢

【参考方案3】：

如果这对其他人有帮助，我的设置与 OP 几乎相同，并且使用了自动播放属性，但我会使用 autoplay 而不是 autoPlay。