「実践テクニック HTML5 スマートフォンWebアプリ制作」
という秀和システムの書籍の勉強で、オーディオプレーヤーアプリを作成しています。
http://www.shuwasystem.co.jp/products/7980html/3189.html
Part 3 マルチメディア実践テクニック編
Chapter 07 オーディオプレイヤーアプリ
P.143
[ 07-3 曲リストをサーバから取得し、再生プログレスバーを表示する ]の
■曲リストファイル
sample.mp3,サンプル曲1
sample.mp3,サンプル曲2
sample.mp3,サンプル曲3
sample.mp3,サンプル曲4
についてお尋ねしたいのですが、
これはどこへ記述すればよいのでしょうか？
書籍には、
「サーバより取得する曲リストのファイルは文字コードUTF-8、
改行コードLFで以下のようなフォーマットにする。」
と記載されています。
おそらくJavaScriptの配列に関することだと思うのですが、
JavaScriptの初心者なので、分かりません。
僕が今作っているアプリへのURLを貼っておきます。
http://yuuri.raindrop.jp/smartphone/index2.html
「--選択してください--」というところに
曲目リストを表示させるようにしたいのです。
同じ書籍を勉強された方がいらっしゃったら、
ご教授頂けると幸いです。
ベストアンサー
-
Cherenkov
満足90pt
曲リストをプログラムから切り離すことによって管理しやすいようにしています。
テキストファイルの文字コードをUTF-8、改行コードをLFにして保存してください。 -
Cherenkovその他の回答
-
TransFreeBSD
満足10pt
曲を置くaudioフォルダに、その部分だけをaudioList.txtというファイル名で保存してください。
どこかの途中に記述するとかではないです。
ファイル名は28行目にあります。req.open('GET','audio/audioList.txt',false);
ちなみに曲を置くフォルダ名は38行目にあります。
selectAudioFile = "audio/" + selectAudio[0];
変数で最初の方にまとめてあればわかりやすいですけどね。
-
この質問へのコメント
質問の情報
- 登録日時
- 2012-05-12 15:59:54
- 終了日時
- 2012-05-13 00:04:16
- 回答条件
- 1人10回まで
この質問のカテゴリ
この質問に含まれるキーワード
人気の質問
-
この英文どうなってますか？ The boy seemed to be waiting for his mother to come.（その少年は母親が来…
匿名質問者
1
1
-
不定詞の形容詞的用法らしいんですけど、副詞的用法と書いたら✖️ですか？ I want to buy a book to read …匿名質問者11
-
日向陽葵という○V女優が好きなのですが似ている○V女優はいますか匿名質問者
-
共通テストで使われるプログラミング言語は共通テスト特有の言語と聞いたのですが、受験勉強で身につけたプ…匿名質問者1
-
内定してほしいポケモンはいますか？匿名質問者
■曲リストファイル
サーバより取得する曲リストのファイルは文字コードUTF-8、
改行コードLFで以下のようなフォーマットにする。
sample.mp3,サンプル曲1
sample.mp3,サンプル曲2
sample.mp3,サンプル曲3
sample.mp3,サンプル曲4
1行に[曲のファイル名,曲名]を記述しておく。
サーバー側で動的に曲リストを更新させる場合には、
この曲リストファイルをPHPやPerlで書き換えてやる良いでしょう。
■HTML部
<form name="audioListForm">
<select id="audioList" name="audioList" onChange="audioSelect();"><option value="9999">--選択してください--</option></select>
</form>
selectタグを定義。曲リストはJavaScriptで生成するため、
「--選択してください--」というoptionだけ指定しておく。
<div id="progress"></div>
20行目で再生プログレスバーの表示領域を定義しておく。
■JavaScript部
「audio.js」
ブラウザにウィンドウがロードされると、window.onload部が実行されます。
８〜10行目で曲リストをサーバより取得し、配列audioListに格納する。
曲リストを取得後、13〜18行目でユーザが曲を選べるように、
selectタグのoption属性をJavaScriptで動的に生成しています。
現在は曲リストファイルは１行ずつ配列audioListに格納されており、
その中身は、
[0]=>sample1.mp3,サンプル1
[1]=>sample1.mp3,サンプル2
のように「ファイル名,曲名」とカンマで区切られています。
これをファイル名と曲名に分割するために、
15行目でsplit()関数を使い、その結果を配列listContentsに格納します。
配列listContents()の中身は、
[0]=>sample1.mp3
[1]=>サンプル1
となります。
16行目でoption属性を追加します。
JavaScriptよりoption属性を追加するには以下のように記述します。
document.[form名].[select名].options[(インデックス番号)] = new Option([追加する値],インデックス番号);
参考：#15 連想配列を知る | JavaScriptの基礎 - ドットインストール
これにより以下の形にoption属性が生成されることになります。
<option value="9999">--選択してください--</option>
<option value="0">サンプル1</option>
<option value="1">サンプル2</option>
<option value="2">サンプル3</option>
<option value="3">サンプル4</option>
次にユーザがSELECTタグから曲を選択するとコールされるaudioSelect()関数を見てみましょう。
function audioSelect() {
var selectValue = document.audioListForm.audioList.value;
if ( selectValue != 9999) {
var selectAudio = audioList[selectValue].split(",");
selectAudioFile = "audio/" + selectAudio[0];
selectAudioName = selectAudio[1]
} else {
selectAudioFile = "";
selectAudioName = "";
}
}
31行目のdocument.audioListForm.audioList.value には<option value="#">の#の値がセットされます。
この値を変数selectValueに代入しておき、
配列audioListから選択した曲のファイル名と曲名の値を
それぞれ変数selectAudioFileと変数selectAudioName に代入します。
42 function playAudio() {
（中略）
65 }
ユーザが再生ボタンをタップすると、44行目でAudioオブジェクトを生成し曲の再生を開始する。
また、47行目で曲名を「再生中:(曲名)」の形で表示します。
次に49〜63行目で再生プログレスバーを表示させます。
audioオブジェクトでは曲の再生が進むにつれtimeupdateイベントが発生します。
このイベントを49行目のaddEventListenerメソッドで取得し、
イベントが発生するとコールバック関数がコールされます。
同じ書籍を勉強された方がいらっしゃったら、
ご教授頂けると幸いです。
ftp://ftp2.shuwasystem.co.jp/pub/book/3189/download.zip
フォルダの場所は
「実践テクニック HTML5 スマートフォンWebアプリ制作\download\07\7-3\js」
です。
//HTMLに曲名リスト表示
var i = 0;
while (audioList[i]) {
listContents = audioList[i].split(",");
document.audioListForm.audioList.options[i+1] = new Option(listContents[1],i);
i++;
}
リストが何も参照されていないのではないのかと・・・。
ReferenceError: i is not defined
arguments: Array[1]
get message: function getter() { [native code] }
get stack: function getter() { [native code] }
set message: function setter() { [native code] }
set stack: function setter() { [native code] }
type: "not_defined"
__proto__: Erro
ちなみにこちらchromiumですが、1曲目2曲目共に再生できてます。
で、ボタンですが。
再生ボタンが有無をいわさず選択中の曲のオブジェクトを新規作成して再生するようになってて、ブラウザ依存かも知れませんが、私の環境だと
再生中に再生ボタンをおす→現在再生中の曲にオーバーラップというかミキシングされて、新たにまた再生が始まる。それまで再生中だった曲は停止が不能に。
一時停止中→頭から、というより再生ボタン二度押しの挙動からすると、停止中の曲とは別オブジェクトで新たに再生する。
といった感じかなと。