Question

我有一系列带有源URL的音频剪辑。我有一个启用自动播放的<audio>元素，其源指向this.state.audioClipSource。当您单击列表中的剪辑时，它将设置状态，并且剪辑将开始播放而无需任何其他交互，因为<audio>元素已启用自动播放。我遇到的问题是此功能将在移动设备上中断。源将被设置，但不会自动播放，因此用户需要在<audio>元素上播放才能开始剪辑。

我会在每个剪辑列表组件中放置一个音频元素，但是剪辑列表实际上可以通过搜索进行过滤。每个剪辑都很长，我希望用户能够在他们当前正在收听的同时搜索新的剪辑。如果音频元素在剪辑列表组件中，则如果用户输入的搜索也不会返回当前播放的剪辑，它将停止播放。

我了解为什么在移动设备上禁用了自动播放功能，但是我想知道是否有一种方法可以与已经编写的代码保持相同的自动播放功能。

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    	audioClipSource: null,
      audioClipTitle: null,
    }
  }
  
  setAudioClip = (audioClipTitle, audioClipSource) => {
  	this.setState({
      audioClipTitle: audioClipTitle,
      audioClipSource: audioClipSource,
    })
  };
  
  render() {
    const AudioClips = [
      {
        audioClipSource: 'https://upload.wikimedia.org/wikipedia/commons/d/d4/Carl_Philipp_Emanuel_Bach_-_Solfeggietto.ogg',
        audioClipTitle: 'audio clip one',
      },
      {
        audioClipSource: 'https://upload.wikimedia.org/wikipedia/commons/e/ed/Fl%C3%B6tenuhr_E-Dur_CPE_Bach_Wq193_06.ogg',
        audioClipTitle: 'audio clip two',
      },
    ];
    
    var audioClipList =[];
    for(var i=0; i<AudioClips.length; i++) {
    	var audioClip = AudioClips[i];
      
      audioClipList.push(
      	<ClipComponent 
          key={i}
          setAudioClip={this.setAudioClip}
          audioClipTitle={audioClip.audioClipTitle}
          audioClipSource={audioClip.audioClipSource}
        />
      )
    };
  
    return (
      <div>
        <div>
          <div>
            {audioClipList}
            &nbsp;
          </div>
          <div>
            <audio src={this.state.audioClipSource} autoPlay controls />
            &nbsp;
          </div>
          <div>
            {JSON.stringify(this.state.audioClipSource)}
            &nbsp;
          </div>
        </div>
      </div>
    )
  }
}


class ClipComponent extends React.Component {
	render() {
  var audioClipTitle = this.props.audioClipTitle;
  var audioClipSource = this.props.audioClipSource;
  	return (
        <div onClick={() => this.props.setAudioClip(audioClipTitle, audioClipSource)}>
          <h3>{audioClipTitle}</h3>
          &nbsp;
       </div>
    )
  }
}

ReactDOM.render(<App />, document.querySelector("#app"))

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

在移动设备上自动播放音频

0 个答案: