前提・実現したいこと
はじめまして。
私は今JavascriptとHTML5の組み合わせで5分置きに音が再生されるウェブアプリを作成しています。
JavascriptはほぼサイトやjQueryを少し囓って実装している程度で初心者でございます。
発生している問題・エラーメッセージ
関数func1でaudioタグを生成したあと、テキストボックスに入力したMP3URLを呼び出し再生はできるようになりました。
私はjSの知識が浅く、無理やりINNERHTMLでAUDIOタグを生成し、ローカルストレージに保存したmp3urlを呼び込み、再生する事にしました。
但し、再生される時と再生されない時が発生し、様々なサイトを見て試行錯誤しましたが手に負えなくなりました。
誠に勝手なのですが、Javascriptにお詳しい方がいらっしゃいましたらこの問題の解決方法を教えていただけないでしょうか。
よろしくお願いします。
###main.jsファイルについて
func1関数は実行するとindex.html内にaudioタグを生成し、音ファイルのURL入力欄の値を取得し、再生するようにしています。
但しこの実装方法は間違っていると自分でも認識しています。
リアルタイムを取得し、if文によりスクリプトを実行するようにしています。
ローカルストレージは設定や、音のURLを保存するようにしています。
該当のソースコード
html
1<html lang="ja"> 2<head> 3<meta charset="utf-8"/> 4<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 5<script type="text/javascript" src="main.js"></script> 6 7</head> 8<body> 9現在時刻は<div id="coltime" style="color:#000;"></div>分です 10<form name="form1" style=""> 11<label><input type="checkbox" id="checkbox2" value="0" onchange="chkboxchk(this.value)">チェックボックス1</label><br> 12<label><input type="checkbox" id="checkbox1" value="0" onchange="chkboxchk(this.value)">チェックボックス2</label><br> 13<label><input type="checkbox" id="checkbox3" value="0" onchange="chkboxchk(this.value)">チェックボックス3</label><br> 14</form> 15<form name="form2" style="font-weight: bold;display:none;"> 16<label><input type="checkbox" id="checkbox4" value="0" onchange="chkboxchk(this.value)">チェックボックス4</label><br> 17</form> 18<input type="text" id="sound1"> 19<input type="button" value="ローカルストレージ保存" onclick="lclstrg.save();"> 20<div id="output_message"></div> 21MP3URLをここに入力<br> 22<!--サンプルURL https://soundeffect-lab.info/sound/button/mp3/decision1.mp3--> 23 <form id="form1" action="#"> 24 <input type="button" onclick="func1()" value="func1()実行"> 25 </form> 26 27</body> 28<script type="text/javascript" language="JavaScript"> 29setInterval(ms2bgcolGreeting, 1000); 30ms2bgcolGreeting(); 31</script> 32</html> 33
js
1コードが長く投稿できないため外部ファイルです 2https://d.kuku.lu/38042174ec
追記します 【2020/01/28 21:38】
本来はページを開いた時にローカルストレージに保存した値=sound1を自動で取得し、if文をトリガーとして再生されるようにしたいと思ってました。
リアルタイムで分が変わったときにfunc1()を実行。
最初に記載したソースコードでは一度func1()を実行しないとif文によるトリガーで再生されないことが理解できました。
その後、ソースコードを短縮し最小規模でローカルストレージに保存した値を取得するページを作成してみたのですが取得ができてませんでした。
検証用のページがこちらになります。 https://maplestory2.online/tera/index.html
ページを開いたときにローカルストレージに保存したsound1の値を取得し、audioタグ、sourceタグを生成し、if文で分が変わった時に再生できるように実装することは可能なのでしょうか。
重ねて質問しますがよろしくお願い致します。
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。