Question

我有以下内容:(使用了一些示例mp3，使用了npm包：https://www.npmjs.com/package/react-sound）

import React from 'react';
import Sound from 'react-sound';

class CustomSound extends React.Component {
    render() {
        return (
            <Sound
              url="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
              playStatus={Sound.status.PLAYING}
              playFromPosition={0 /* in milliseconds */}
              onLoading={this.handleSongLoading}
              onPlaying={this.handleSongPlaying}
            />
        );
    }
}

export default CustomSound;

我在这里导入：

...

import CustomSound from './js/customSound.jsx';

...

        if(currentState.visibility.grid) {
            grid =  <Grid 
                        visibility={currentState.visibility.grid}
                        visibilityCustomCity={currentState.visibility.city}
                        setVisibility={this.setVisibility}
                        current={currentState.data}
                        points={currentState.points}
                        addPoints={this.addPoints}
                        setVisibility={this.setVisibility}
                        setCatBgColor={this.setCatBgColor}
                        catBgColor={currentState.catBgColor}
                        bgImg={currentState.bgImg}
                        setFinalPlay={this.setFinalPlay}
                        setBgColor={this.setBgColor}
                        setCountVisibility={this.setCountVisibility}
                    >
                        <CustomSound />
                    </Grid>
        }

        if(currentState.visibility.timeUp) {
            timeUp =    <TimeUp 
                            visibility={currentState.visibility.timeUp}
                            setVisibility={this.setVisibility}
                            setCountVisibility={this.setCountVisibility}
                        />
        }

        if(currentState.finalPlay.correct) {
            correct =   <Correct setBgColor={this.setBgColor} setHeaderVisible={this.setHeaderVisible} points={currentState.points} setFinalPlay={this.setFinalPlay} setVisibility={this.setVisibility} />
        }

        if(currentState.finalPlay.incorrect) {
            incorrect = <Incorrect setBgColor={this.setBgColor} resetPoints={this.resetPoints} setHeaderVisible={this.setHeaderVisible} points={currentState.points} setFinalPlay={this.setFinalPlay} setVisibility={this.setVisibility} />
        }

        return (
            <div className={"wrapper " + currentState.bgColor}>
                <div className="wrapper-inner">
                    <h1 className={isH1Visible}><span>the big</span> reveal</h1>
                    {form}
                    {cat}
                    {grid}
                    {timeUp}
                    {correct}
                    {incorrect}
                </div>
            </div>
        )
    }
}

export default App;

但是，当“currentState.visibility.grid”设置为true时，声音不会播放。

除此之外，控制台中没有错误：

SoundManager V2.97a.20170601 (HTML5-only mode)
soundmanager2.js?afc8:1305 SoundManager 2 HTML5 support: mp3 = true, mp4 = true, ogg = true, opus = true, wav = true, flac = true
soundmanager2.js?afc8:1305 SoundManager 2: Ready. ✓

更新

如果移到：

return (
    <div className={"wrapper " + currentState.bgColor}>
        <div className="wrapper-inner">
        <CustomSound />
            <h1 className={isH1Visible}><span>the big</span> reveal</h1>
            {form}
            {cat}
            {grid}
            {timeUp}
            {correct}
            {incorrect}
        </div>
    </div>
)

声音播放。

Answer 1

不要将其添加为Grid的孩子。相反，将其作为兄弟姐妹传递：

if(currentState.visibility.grid) {
    grid =  <div>
        <Grid
            visibility={currentState.visibility.grid}
            visibilityCustomCity={currentState.visibility.city}
            setVisibility={this.setVisibility}
            current={currentState.data}
            points={currentState.points}
            addPoints={this.addPoints}
            setVisibility={this.setVisibility}
            setCatBgColor={this.setCatBgColor}
            catBgColor={currentState.catBgColor}
            bgImg={currentState.bgImg}
            setFinalPlay={this.setFinalPlay}
            setBgColor={this.setBgColor}
            setCountVisibility={this.setCountVisibility}
        />
        <CustomSound />
    </div>;
}

注意周围的div。现在，您将返回包含Grid和CustomSound的div。

尝试播放mp3时的反应问题

1 个答案: