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 노드에 액세스해야하기 때문에 그것은 필요악입니다하지 않습니다.