Question

我正在尝试自动播放一些音频，而在iOS上，它不会自动播放。但是，如果我将它包装在AJAX调用中，它就会触发。所以这就是我所拥有的：

// run on page load
var audio = document.getElementById('audio');

jQuery.ajax({
    url: 'ajax.js',
    async: false,
    success: function() {
        audio.play(); // audio will play in iOS before 4.2.1
    }
});

我如何使用React / Redux进行设置？

Answer 1

以下是使用fetch（开箱即用的大多数浏览器支持）和blob对象网址的一个非常简单的示例。你当然也可以使用jQuery的ajax。

它与您的代码非常相似，但在componentDidMount方法中。 audio元素通过React's refs引用。

class Player extends React.Component {
  componentDidMount() {
    fetch(this.props.src)
      .then(res => res.blob())
      .then(blob => {
        const { audio } = this.refs;
        audio.src = URL.createObjectURL(blob);
        audio.play();
      });
  }
  render() {
    return <audio ref="audio" controls></audio>;
  }
}

ReactDOM.render(
  <Player src="https://ia802508.us.archive.org/5/items/testmp3testfile/mpthreetest.mp3" />,
  document.getElementById("View")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='View'></div>

❗️

此外，通常不建议在React中使用refs，但由于我们需要访问音频播放器的实际DOM节点，因此这是一个必要的恶意。

如何通过React / Redux进行简单的AJAX调用来播放音频？

1 个答案: