前提・実現したいこと
アップローダーに上げたmp3ファイルをWebAudioAPIを利用して再生する機能を実装しています。
下記は動作サンプルです。
サンプル(CodeSandBox)
ReactとTypescriptの構成になっています。
動作サンプルのコードは下記ページの2つ目のコードをベースにしています。
音を操るWeb技術 - Web Audio API入門 - ICS MEDIA
現状は次項のエラーが表示されます。
エラーを解決して、アップローダーにあるmp3を再生したいです。
発生している問題・エラーメッセージ
Failed to fetch
該当のソースコード
tsx
1const ctx = new AudioContext(); 2let sampleSource: any; 3let sample: AudioBuffer | null; 4 5const App = () => { 6 const setupSample = async () => { 7 const res = await fetch("https://dotup.org/uploda/dotup.org2216246.mp3"); 8 const arrayBuffer = await res.arrayBuffer(); 9 const audioBuffer = await ctx.decodeAudioData(arrayBuffer); 10 return audioBuffer; 11 }; 12 const [ready, setReady] = useState(false); 13 useEffect(() => { 14 (async () => { 15 sample = await setupSample(); 16 setReady(true); 17 })(); 18 }, []); 19 20 const playSample = (ctx: any, audioBuffer: any) => { 21 sampleSource = ctx.createBufferSource(); 22 sampleSource.buffer = audioBuffer; 23 sampleSource.connect(ctx.destination); 24 sampleSource.start(); 25 setPlaying(true); 26 }; 27 28 const [playing, setPlaying] = useState(false); 29 const playAudio = async () => { 30 if (playing) return; 31 playSample(ctx, sample); 32 }; 33 const pauseAudio = () => { 34 sampleSource.stop(); 35 setPlaying(false); 36 }; 37 38 return ( 39 <div className="App"> 40 <div> 41 <button 42 onClick={playing ? pauseAudio : playAudio} 43 disabled={ready ? false : true} 44 > 45 {playing ? "pause" : "play"} 46 </button> 47 <input type="range" /> 48 </div> 49 </div> 50 ); 51};
調べたこと
エラー文を調べると、ネットワークエラーの問題であると分かりました。
[フロントエンド] fetchを用いたAjax通信を行う - YoheiM .NET
しかし直接fetchするURLを開くとmp3が再生されます。
また、fetchを使ってWebAudioAPIを使って音を鳴らす例を調べましたが、いずれもローカルのファイルを参照している例しか見つけられず、外部サイトから音声ファイルを参照する方法を見つけられませんでした。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。