javascriptのaudioで困ってます
- javascriptのaudioで音楽を再生させる方法について質問です。
- inputタグで選択した音楽ファイルを再生させる際に、ファイルへのパスを取得する方法が分からないです。
- audio要素のsrcにファイルへのパスを指定してもうまく再生されません。
- ベストアンサー
javascriptのaudioで困ってます。
ブラウザーで音楽を再生させたいと思い、いろいろ調べながら下記のようにつくってみましたが、うまく再生されません。 やりたいことは、ローカルファイルからユーザーが選択した音楽ファイルを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>
- dkong
- お礼率86% (170/197)
- JavaScript
- 回答数2
- ありがとう数9
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
原因はコンソールを見るとわかると思います。 <!DOCTYPE html> <title>audio test</title> <input type="file" id="input"> <script> document.getElementById('input').onchange = function () { new Audio(URL.createObjectURL(this.files[0])).play() } </script>
その他の回答 (1)
- b0a0a
- ベストアンサー率49% (156/313)
webkit～とかいうベンダープレフィックスは、昔成熟してない機能を提供する時に仮に付けられていたものです。 近年新しく付けられることはなくなりましたし、今までついていたものもほとんど外れたAPIがリリースされています。 なのでこれからの認識としては、そういったAPIは使わない、そういったAPIを使った解説は古いものと考えたほうがいいです。
お礼
ありがとうございます。
関連するQ&A
- javascriptで困っています。教えてください
スマートフォンユーザーのローカルフォルダにある音源を選択して鳴らすようにしたいと思い、下記のようにしたのですが、アンドロイドの場合は、wavなどのファイルを選択できるのですが、鳴りません。iPhoneの場合は写真しか選択できないのですが、スマートフォンのローカルフォルダの音源を選択して鳴らすにはどのようにすればできるのでしょうか？具体的に教えてください。よろしくお願いします。 wavファイルならアンドロイドもiPhoneでも大丈夫かと思い選んでいます。windowsパソコンのファイヤーフォックスやグーグルクロムならできます。インターネットエクスプローラーはできませんでした。Macでは試せてません。 <!doctype html> <html> <head> <title>audio test</title> </head> <body> <input type="file" id="input"> <script> document.getElementById('input').onchange = function () { new Audio(URL.createObjectURL(this.files[0])).play() } </script> </body> </html>
- 締切済み
- HTML
- JavaScript で困ってます。
JavaScript でスマートフォンのローカルフォルダにある音楽ファイルを選択して再生したいのですがうまくいきません。 <script> document.getElementById('input').onchange = function () { new Audio(URL.createObjectURL(this.files[0])).play() } </script> iPhoneやandroid のスマートフォンのローカルフォルダの音楽ファイルを選択して再生するにはどのようにすればできるのでしょうか？以前にも質問させていただいたのですが、どうしてうまくいきません。具体的に教えてください。よろしくお願いします。
- 締切済み
- JavaScript
- いくつものJavaScriptは使えませんか？
ひとつのHTMLにいくつかのJavaScriptを入れています。ひとつは</HEAD>のまえに外部ファイルを呼び出す形で <SCRIPT LANGUAGE="javascript"src="script/css.js"> </SCRIPT></HEAD> このような形。 そのほか<BODY>～</BODY>の間に<SCRIPT LANGUAGE="JavaScript">～</SCRIPT>という形で、日付表示とお気に入り登録を入れています。 この二つと外部ファイルの呼び出しは作動するのですが、なぜかリンクをクリックして出させる小窓はぜんぜん表示されません（下記内容です） <script> //Popup Window Script //By JavaScript Kit (http://javascriptkit.com) //JavaScript tutorials and over 400+ free scripts function openpopup(){ var popurl="thankyou.htm" winpops=window.open(popurl,"","width=450,height=450,toolbar,") } </script> <a href="javascript:openpopup()">Click here to open window</a> この内容だけで、HTMLに貼り付けると うまくいのですが・・・・・(^^；
- ベストアンサー
- JavaScript
- Javascriptを使った隠しページ探しについて
隠しページ探しのホームページを作っているのですが、 【index.html】と【fff.js】という２つのファイルで作っています。 【index.html】は <html><head><title>第１問</title><script src="fff.js"></script> </head> <body oncontextmenu="return false;" onkeydown="return false;"> ここに答えを入れて下さい。<br> <form name="ike"> <input type="text" name="nyu"><input type="button" value="回答" onclick="ikou()"> </form> </body></html> 【fff.js】は function ikou(){ var a = document.ike.nyu.value+'9'; if(a == 6){ if(a == 9){ document.write('次は379.htmlです。'); }else{ window.alert('はずれ'); }else{ window.alert('はずれ'); } （次は379.htmlです。の所は実際は暗号化） です。 fff.jsの書き換えを行って解く問題にしようと思っているのですが、エラーになってしまいます。 どこを直せばいいのでしょうか。
- ベストアンサー
- その他（インターネット・Webサービス）
- Javascriptで動的にフォルダを切り替えたい
正直悩んでいます。 Windows7/10の混在している社内の環境でIEからのみ閲覧するページを簡単に作ろうと着手してハマっています。 ファイルサーバのフォルダを表示するページを目指しています。 その際に予め「新宿、池袋、立川」の各営業所向けのフォルダをボタンで切り替えて更に各月ごとに作成されたフォルダまで開くようにという要請を受けています。 このページを開いて、ダミーで用意したGoogleのサイトは上手く開けます。 しかし各営業所のフォルダを指定して開こうとすると「このページは表示できません」というページが表示されます。 そのページのURLは「res://ieframe.dll/dnserror.htm#file:///C:/Users/560030_suzuki/Desktop/'file:///999.999.999.999/share/東京本社/560002_経営戦略室/★経営指標(Ver.2.0)★/01_【TS】東京新宿オフィス/2018年03月'」と表示されます。 file:///C:/Users/560030_suzuki/Desktop/とは、560030_suzukiが私のユーザIDなのですが、それが取り込まれるのが謎なのです。これはここにファイルを置いているからでしょうか。 設定したいのは「'file:///999.999.999.999/share/東京本社/560002_経営戦略室/★経営指標(Ver.2.0)★/01_【TS】東京新宿オフィス/2018年03月'」という少々長めの社内で使用しているファイルサーバのフォルダパスなのですがどうもうまくいきません。 ページとしては以下にソースを貼らせていただきます。 --------------------------------------------------------------------------------------------------------------------- <html> <head> <script type="text/javascript"> function set(n) { var date = new Date(); var year; var month; var mm = date.getMonth() + 1; if (mm < 10) { mm = "0" + mm; }; var path1 = "'file:///999.999.999.999/share/東京本社/560002_経営戦略室/★経営指標(Ver.2.0)★/"; var path2ts = "01_【TS】東京新宿オフィス/"; var path2ti = "02_【TI】東京池袋オフィス/"; var path2tt = "03_【TT】東京立川オフィス/"; var path3 = date.getFullYear() + "年" + mm + "月" + "'" ; var url = [path1 + path2ts + path3 , path1 + path2ti + path3 , path1 + path2tt + path3]; var img = document.getElementById('change'); img.parentNode.href = url[n]; alert(url[n] + 'に変更しました'); } </script> </head> <body> <a href="http://www.google.com"> <img src="01.png" id="change"> <hr> <input type="button" value="TSへ変更" onclick="set(0)"> <input type="button" value="TIへ変更" onclick="set(1)"> <input type="button" value="TTへ変更" onclick="set(2)"> </body> </html> ---------------------------------------------------------------------------------------------------------------------
- 締切済み
- JavaScript
- <input type="file">で画像を選択
HTMLのページ内で<input type="file">で画像を選択して その画像を現在のHTMLページに表示する という質問のベストアンサー http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1151913361 にしたがって、使ってみましたが、表示されません。 使い方のどこがまちがっているか教えてください。 また、そこにある動作サンプルが見えません。 動作サンプルを見る方法もわかりましたら、お願いします。 -------------------------- <html lang="ja"> <head> <title></title> <script type="text/javascript"> function dispImg() { var myFile = document.getElementById('ans5'); var src = null; if (window.File) { src = myFile.files[0].getAsDataURL(); } else { src = myFile.value; } document.getElementById('DISP').src = src; } </script> </head> <body> <form name ="a"> 写真を指定してください： <input type="file" name="ans5" Onchange="dispImg();"><br> <img src="" alt="" id="DISP"> </form> </body> </html>
- ベストアンサー
- JavaScript
- JavaScriptでリクエストを飛ばす方法を教えて下さい。
下記内容で画像の切り替えを教えて頂いたのですがこれに 画像をクリックした時にサーバー側にクリックした事を分るために URL（リクエスト）をバックグラウンド（非同期かな）で渡したいと 思います。 どうしたら良いでしょうか？？ ブラウザーの画面は画像をクリックしても切り替わりません。 誠に恐縮ですが下記ソースに追加して教えて頂ければと思います。 何卒よろしくお願いします。 <html> <head> <script type="text/javascript"><!-- function clickImg( img ) { var arraySrc = img.src.split( '/' ); var src = arraySrc[arraySrc.length - 1]; if( src == "a.jpg" ) { document.cookie = "click=1;"; img.src = "b.jpg"; img.style.cursor = "default"; } } function init() { if( document.cookie ) { var img = document.getElementById( "img1" ); document.getElementById( "img1" ).src = "b.jpg"; img.style.cursor = "default"; } } //--></script> </head> <body onload="init();"> <img src="a.jpg" id="img1" style="cursor:pointer;" onclick="clickImg(this);" /> </body> </html>
- 締切済み
- JavaScript
- JavaScriptについてご教授願います。
お世話になります。 JavaScriptについてご教授願います。 main.html ----------------------------------------------------------- <HTML> <HEAD> </head> <body> <INPUT TYPE=BUTTON value="閉じる" onClick="CloseWin()"> </body> </html> ----------------------------------------------------------- kozin.html ----------------------------------------------------------- <HTML> <HEAD> <script language="JavaScript"> function CloseWin(){ window.close(); } </script> </head> <body> 個人情報 </body> </html> ----------------------------------------------------------- 実現したいことはmain.htmlのボタンを押下することによって kozin.htmlの画面を閉じるということです。 お手数をお掛け致しますがどうぞよろしくお願いいたします。
- ベストアンサー
- JavaScript
- リンク時にjavascriptを２つ動作させたいのですが・・・
こんにちは。 実はHPで、リンク時に、javascriptで２つのことを命令したいのです。 １つ目は、効果音をならす。 ２つ目は、リンク先でブラウザの戻るを禁止する といったような感じです。 しかし、javascriptはよく分からないので、とりあえず、下のようなタグを書いたのですが、ちっとも動作しませんでした。 どなたか、教えていただければ助かります。 <head> <script language="JavaScript"> <!-- function wav(name) {sound.src = name;} //--> </script> <bgsound src="" id="sound"> </head> <body> <a href="javascript:window.location.replace('リンク先URL');" javascript:wav('効果音のファイル名')">リンク</a> </body>
- ベストアンサー
- JavaScript
- SSIをJavascriptの変数に割り当てる方法
はじめまして！JavaScriptで質問があります。 JavaScriptで質問があります。 以下のようなwindowを生成し、HTMLを出力するJavaScriptコードをJSファイルとして登録し、 <script type="text/javascript" src="..."></script> で参照しています。 JSファイル内の[[ここに改行コード]]はSSIファイルを読み込んでいます。 SSIファイルの内容は改行コード、"（ダブルクォーテーション）を含んでいます。 この場合win.document.write(に続く'（シングルクォーテーション）で囲った文字列が改行してしまうので、 JavaScriptエラーとなってしまいます。 このエラーを解決できる手段はないでしょうか。 ↓JSファイル ---------------------------------- function windowOpen() { var win; win = window.open(); win.document.write('<html><head><title>title</title></head><body>[[ここに改行コード]]</body></html>'); } ---------------------------------- function内で以下のようにコメントを出力し、windowOpenの関数のコードを読み取ることができれば、 windowOpenCommentStart～windowOpenCommentEndまでの文字を切り取り、変数に代入することができる のですが、関数のコードを取得することなんてできませんよね。。 ---------------------------------- function windowOpen() { /* windowOpenCommentStart [[ここに改行コード]] windowOpenCommentEnd */ var win; win = window.open(); win.document.write('<html><head><title>title</title></head><body>' + [[ここに改行コードを変数化]] + '</body></html>'); } ---------------------------------- JSファイル内に[[ここに改行コード]]を出力することが条件ですが、 どんな方法でもよいので実現する方法はないでしょうか。 環境：WindowsXP ブラウザ：IE6,FireFox2
- ベストアンサー
- JavaScript
お礼
ありがとうございました。createObjectURLのことばかり考えて、初歩的なミスをしていました。うまくいきました。
補足
window.webkitURL.createObjectURL(this.files[0]) URL.createObjectURL(this.files[0])の違いは何ですか・