※ ChatGPTを利用し、要約された質問です(原文:javascriptのaudioで困ってます。)
javascriptのaudioで困ってます
このQ&Aのポイント
javascriptのaudioで音楽を再生させる方法について質問です。
inputタグで選択した音楽ファイルを再生させる際に、ファイルへのパスを取得する方法が分からないです。
audio要素のsrcにファイルへのパスを指定してもうまく再生されません。
ブラウザーで音楽を再生させたいと思い、いろいろ調べながら下記のようにつくってみましたが、うまく再生されません。
やりたいことは、ローカルファイルからユーザーが選択した音楽ファイルをaudio要素のsrcわたして、再生させたいと考えています。
inputタグでユーザーが選択したファイルへのパスを取得する方法がよく分かってません。window.webkitURL.createObjectURL(this.files[0]);の部分はブラウザーによっていろいろ変わるのでしょうか?ファイルへのパスを取得する別の方法があるのでしょうか?もっとほかに原因があるのでしょうか?分かっていないことが多いのです。教えていただければありがたいです。よろしくお願いします。
<!doctype html>
<html>
<head>
<title>audio test</title>
<script type="text/javascript">
var audio_src;
document.getElementById('input').onchange = function() {
audio_src = window.webkitURL.createObjectURL(this.files[0]);
// AudioElement を作成
var audio = new Audio();
// サウンドファイルまでの URL アドレスを指定
audio.src = audio_src;
// 再生を開始する
audio.play();
};
</script>
</head>
<body>
<input type="file" id="input" />
</body>
</html>
お礼
ありがとうございました。createObjectURLのことばかり考えて、初歩的なミスをしていました。うまくいきました。
補足
window.webkitURL.createObjectURL(this.files[0]) URL.createObjectURL(this.files[0])の違いは何ですか・