React/Redux経由でオーディオを再生するための簡単なAJAX呼び出しを行うにはどうすればよいですか？

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のオブジェクトURLを使用した非常に簡単な例です。もちろん、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>

❗️

また、通常リアクトでrefsを使用することは推奨されませんが、我々は、それは必要悪であるオーディオプレーヤーの実際のDOMノードにアクセスする必要があるため。