Question

我有以下内容：（https://www.npmjs.com/package/react-sound）

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

声音正确和不正确的道具设置在＆＃34; getAnswer＆＃34;功能：

import React, { Component } from 'react';

class Action1 extends Component {
    constructor(props) {
        super(props);

        this.state = {
            answer1: "",
            answer2: "",
            answer3: "",
            answer4: "",
            answerDisabled: false
        }
    }

    updateStateProperty(el, val) {
        var s = {};
        s[el] = val;
        this.setState(s);
    }

    getAnswer = (e) => {
        let answer = e.target.getAttribute('data-id');
        this.props.checkAnswer(e);

        if(e.target.getAttribute('data-question') == ("option_" + this.props.question.correct_option)){
            this.updateStateProperty(answer, 'correct');
            this.props.setCorrectOn(true);
        }

        else {
            this.updateStateProperty(answer, 'wrong');  
            this.props.setIncorrectOn(true);    
        }

        this.setState({
            answerDisabled: true
        })

        setTimeout(() => {
            this.props.setIncorrectOn(false);
            this.props.setCorrectOn(false);
            this.updateStateProperty(answer, '');
        }, 1000);

        setTimeout(() => {
            this.setState({
                answerDisabled: false
            })
        }, 1500)
    }

    render() {

        return(
            <div className="action">

                    <div className={"action-question " + this.props.catBgColor}>
                        <h3>{this.props.question.question}</h3>
                    </div>

                    <div className={"action-answers " + this.props.catBgColor}>
                        <p className={this.state.answer1 + " " + (this.state.answerDisabled ? 'disable-link' : "")} data-id="answer1" data-question="option_1" onClick={this.getAnswer.bind(this)}>{this.props.question.option_1}</p>
                        <p className={this.state.answer2 + " " + (this.state.answerDisabled ? 'disable-link' : "")} data-id="answer2" data-question="option_2" onClick={this.getAnswer.bind(this)}>{this.props.question.option_2}</p>
                        <p className={this.state.answer3 + " " + (this.state.answerDisabled ? 'disable-link' : "")} data-id="answer3" data-question="option_3" onClick={this.getAnswer.bind(this)}>{this.props.question.option_3}</p>
                        <p className={this.state.answer4 + " " + (this.state.answerDisabled ? 'disable-link' : "")} data-id="answer4" data-question="option_4" onClick={this.getAnswer.bind(this)}>{this.props.question.option_4}</p>
                    </div>

            </div>
        );
    }
}

export default Action1;

每个声音组件具有以下结构（具有不同的声音文件）：

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

class CustomSound extends React.Component {
    render() {
        return (
            <Sound
              url="./assets/sound.mp3"
              playStatus={this.props.soundOn ? Sound.status.PLAYING : Sound.status.STOPPED}
              playFromPosition={0 /* in milliseconds */}
            />
        );
    }
}

export default CustomSound;

当触发2中的任何一个时：

this.props.setCorrectOn(true); or this.props.setIncorrectOn(true);

声音来自：

<CustomSound soundOn = { this.state.soundOn} />

再次停止并重新开始。理想情况下，这是一个我想要进行的配乐，并在游戏的后期停止播放。

问题似乎只发生在iPad上。在桌面上的Chrome是绝对正常的。

Answer 1

在http://www.schillmania.com/projects/soundmanager2/doc/

找到解决方案

soundManager.setup({ ignoreMobileRestrictions: true });

Ipad React同时播放2个声音

1 个答案: