Question

我构建了一个react应用程序，可以在桌面Web浏览器上播放/暂停当前选定的音频：

playPreview() {
    if (!this.state.isPlaying) {
      this.setState({ isPlaying: true });
      this.refs.audioRef.play();
    } else {
      this.setState({ isPlaying: false });
      this.refs.audioRef.pause();
    }
  }

在iOS移动浏览器（safari和chrome mobile）上，我得到一个未处理的拒绝（NotSupprted Error）：不支持该操作。

我知道在iOS上音频必须从用户的手势播放但我用onClick开启我的方法的问题：

{!props.isPlaying 
  ? (<MdPlayCircleOutline className="play-btn" onClick={() => 
    props.playPreview()} />) 
  : (<MdPauseCircleOutline className="play-btn" onClick={() => 
    props.playPreview()} />)
}

我在父应用程序组件中有一个隐藏元素：

<audio ref="audioRef" src={this.state.currentSongUrl} style={{ display: 'none' }} />

所以我假设它不起作用，因为onClick不是直接的音频元素？如果是这种情况，我肯定如何结合这两个要求。

1 - 动态更改音频源 2 - 交替播放和暂停

提前感谢任何见解和帮助！

-Todd

Answer 1

这可能会发生，因为您使用refated语法。你应该尝试这样的事情：

<audio ref={(input) => {this.audioRef = input}} src={this.state.currentSongUrl} style={{ display: 'none' }} />

和

playPreview() {
  if (!this.state.isPlaying) {
    this.setState({ isPlaying: true });
    this.audioRef.play();
  } else {
    this.setState({ isPlaying: false });
    this.audioRef.pause();
  }
}

供参考，请访问：Refs and the DOM

Answer 2

我使用

import React from 'react'
import ReactPlayer from "react-audio-player";

let ref = null;
const stats = {play:false};

const Player = props => {
return (
    <div key={`props.id`}>
        <ReactPlayer
            src={`props.src`}
            ref={(el)=> {ref = el} }
            controls
        />
        <div onClick={()=>start()}>
            x
        </div>
    </div>
)
}
function start() {
    stats.play = !stats.play;
    console.log(stats, ref)

    if(stats.play){
        ref.audioEl.current.play()
    }else{
        ref.audioEl.current.pause()
    }
}

ReactDOM.render( <Player src="https://www.w3schools.com/html/horse.mp3" id="p1" /> , document.getElementById('root') );

React - refs - 音频播放 - iOS上的未处理拒绝（NotSupportedError）

2 个答案: