「実践テクニック 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

「--選択してください--」というところに
曲目リストを表示させるようにしたいのです。

同じ書籍を勉強された方がいらっしゃったら、
ご教授頂けると幸いです。

回答の条件
  • 1人10回まで
  • 13歳以上
  • 登録:2012/05/12 15:59:54
  • 終了:2012/05/13 00:04:16

ベストアンサー

id:Cherenkov No.2

Cherenkov回答回数1503ベストアンサー獲得回数4932012/05/12 21:07:34

ポイント90pt

曲リストをプログラムから切り離すことによって管理しやすいようにしています。
テキストファイルの文字コードをUTF-8、改行コードをLFにして保存してください。

他12件のコメントを見る
id:Cherenkov

firefoxはmp3をサポートしてないようです…

2012/05/12 23:57:55
id:kireifish

書籍のコラム欄に記載がありました。
「FirefoxやOperaはH.264を拒否。
GoogleはH.264を支持していたが、突然WebMをを支持。
今度はAppleがWebMを拒否。」

完全な挙動ではありませんが、Cherenkovさんが一番粘って回答してくれたので
ベストアンサーにしたいと思います★
ありがとうございます!!

2012/05/13 00:03:30

その他の回答(1件)

id:TransFreeBSD No.1

TransFreeBSD回答回数667ベストアンサー獲得回数2682012/05/12 17:24:33

ポイント10pt

曲を置くaudioフォルダに、その部分だけをaudioList.txtというファイル名で保存してください。
どこかの途中に記述するとかではないです。
ファイル名は28行目にあります。

	req.open('GET','audio/audioList.txt',false);

ちなみに曲を置くフォルダ名は38行目にあります。

		selectAudioFile = "audio/" + selectAudio[0];

変数で最初の方にまとめてあればわかりやすいですけどね。

id:kireifish

ご回答ありがとうございます。
audioフォルダに、audioList.txtを作成し、保存してみました。

うーん・・・うまくいきません。(゜レ゜)

ちなみに曲を置くフォルダ名は38行目にあります。
<34行目の間違いでしょうか?

2012/05/12 21:46:57
id:Cherenkov No.2

Cherenkov回答回数1503ベストアンサー獲得回数4932012/05/12 21:07:34ここでベストアンサー

ポイント90pt

曲リストをプログラムから切り離すことによって管理しやすいようにしています。
テキストファイルの文字コードをUTF-8、改行コードをLFにして保存してください。

他12件のコメントを見る
id:Cherenkov

firefoxはmp3をサポートしてないようです…

2012/05/12 23:57:55
id:kireifish

書籍のコラム欄に記載がありました。
「FirefoxやOperaはH.264を拒否。
GoogleはH.264を支持していたが、突然WebMをを支持。
今度はAppleがWebMを拒否。」

完全な挙動ではありませんが、Cherenkovさんが一番粘って回答してくれたので
ベストアンサーにしたいと思います★
ありがとうございます!!

2012/05/13 00:03:30
  • id:kireifish
    該当箇所の原文をそのまま書き写してみました。


    ■曲リストファイル
    サーバより取得する曲リストのファイルは文字コード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部が実行されます。
    8〜10行目で曲リストをサーバより取得し、配列audioListに格納する。

    曲リストを取得後、13〜18行目でユーザが曲を選べるように、
    selectタグのoption属性をJavaScriptで動的に生成しています。
    現在は曲リストファイルは1行ずつ配列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メソッドで取得し、
    イベントが発生するとコールバック関数がコールされます。



    同じ書籍を勉強された方がいらっしゃったら、
    ご教授頂けると幸いです。
  • id:kireifish
    該当するファイルはこちらからダウンロードできます。

    ftp://ftp2.shuwasystem.co.jp/pub/book/3189/download.zip

    フォルダの場所は
    「実践テクニック HTML5 スマートフォンWebアプリ制作\download\07\7-3\js」
    です。
  • id:kireifish
    このあたりが気になります。

    //HTMLに曲名リスト表示
    var i = 0;
    while (audioList[i]) {
    listContents = audioList[i].split(",");
    document.audioListForm.audioList.options[i+1] = new Option(listContents[1],i);
    i++;
    }

    リストが何も参照されていないのではないのかと・・・。
  • id:kireifish
    console.log(audioList[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
  • id:kireifish
    今度は一時停止ボタンの挙動がおかしなことに・・・。
  • id:TransFreeBSD
    ひとまず解決した様でなにより。
    ちなみにこちらchromiumですが、1曲目2曲目共に再生できてます。

    で、ボタンですが。
    再生ボタンが有無をいわさず選択中の曲のオブジェクトを新規作成して再生するようになってて、ブラウザ依存かも知れませんが、私の環境だと
    再生中に再生ボタンをおす→現在再生中の曲にオーバーラップというかミキシングされて、新たにまた再生が始まる。それまで再生中だった曲は停止が不能に。
    一時停止中→頭から、というより再生ボタン二度押しの挙動からすると、停止中の曲とは別オブジェクトで新たに再生する。
    といった感じかなと。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません