序文：これは、私が最近学んだ小さなデモの要約です。それらを使用するのはまだ長い道のりですが、知識ポイントを練習して統合することはまだ良いことです。最近、私はJS Booksとboostrap.cssのソースコードを閲覧していました。このデモを行った後、それは一時的な終わりです。次は、jQueryのソースコードとboostrap.jsのソースコードです。タスクは非常に困難です。さあ、記事全体にコードを投稿しません。興味がある場合は、メッセージを送信でき、コードを渡すことができます〜
文章：
まず、レンダリング
1。レイアウト：ブーストラップのレスポンシブで適応的なレイアウトを排除することはできません。コンテナ内のネストされた列は、それぞれ脇にネストされ、メイン（H5新しいタグ）とdiv（id = "MusicConsole"）がそれぞれネストされます。左側の音楽リスト、メインは右側の歌詞ディスプレイボックス、divは下のコントロールボックスです。
2。主な実装関数：
（1）曲（曲リストの右上隅に「+」アイコンを追加し、曲（曲リストの右上隅にある「トランプ」アイコン）を削除する）
（2）曲リストの曲をクリックしてください：トラックの場合は再生されます。歌詞がある場合、歌詞が表示され、歌詞がない場合、「歌詞なし」が表示されます。曲が再生されるにつれて、進行中のバーと時間は変わります。
（3）前のボタン（垂直線 +三角形）をクリックすると、前の曲が再生されます。歌詞がある場合、歌詞がスクロールされ、歌詞がない場合、「歌詞なし」が表示されます。曲が再生されるにつれて、進行中のバーと時間は変わります。
[再生]ボタン（三角形）をクリックすると、一時停止ボタン（二重垂直線）に変更され、曲も再生状態から一時停止状態に変更されます。
次のボタン（三角形 +垂直線）をクリックすると、次の曲が再生されます。歌詞がある場合、歌詞が表示され、歌詞がない場合、「歌詞なし」が表示されます。曲が再生されるにつれて、進行中のバーと時間は変わります。
オーディオボタン（スピーカー）をクリックすると、ミュートボタン（スピーカー + "x"）になり、それに応じて曲もミュートになります。
ループボタン（矢印付きの円）をクリックすると、単一の再生が行われます。ループボタンを保持すると、シングルループが繰り返されます。
3。遭遇した問題：
（1）グリフィコンのサイズはフォントサイズによって変更されます
Boostrapアイコンが使用されるため、デフォルトのサイズが小さすぎます。幅と高さを試しましたが、応答しませんでした。フォントサイズを使用してサイズを変更することに気付きました。
（2）str.replace（oldstr、newtr）
[再生]ボタンをクリックすると、再生ステータスが変更され、それに応じてボタンアイコンが変更されます。したがって、交換が使用されますが、長い間応答していません。それは、元の文字列に直接ではなく、文字列を再生しているからであることが判明しました。
（3）セキュリティ上の考慮事項により、ブラウザがローカルファイルを読み取ることは困難です
私はもともとLocalStorageを使用してコンテンツを音楽リストに保存する予定でしたが、H5のFilereaderで長い間試しましたが、方法はありませんでした。私はあきらめなければなりませんでした。
FileReaderを使用して、写真やHTMLファイルを読むことができます。そのreadasdataurlメソッドは、ファイルパスを取得できます。これについて言えば、私は本当に笑いたいです。音楽ファイルを保存しようとしました。わかりました、行きましょう、何？ LocalStorageはメモリから外れていますか？ 5mはファイルパスを保存しますか？おかしい私？
次の質問はすべて歌詞に含まれています。 。 。それをするとき、私はとても疲れています。 。 。
（4）歌詞を分析するときに遭遇する問題
歌詞は通常LRCファイルですが、実際には単純なテキストです。 Ajaxを使用してバックグラウンドからデータを送信しますが、私と一緒に遊ぶ背景はありません。そのため、歌詞を直接コピーして、死んだデータとして文字列に書くことしかできません。
もともとは、split（ '/r/n'）を使用して文で文の歌詞に文字列を分割し、それを配列に入れたことが計画されていました。
その結果、さまざまなエラーを報告しました。長い仕事の後、私はついにこの分割でそれを見つけました。私はそれを長い間オンラインでチェックしましたが、それはJSポットであることが判明しました。
JS構文は最後にセミコロンを強制しないため、システムラインブレーク（つまり、キャリッジリターン）を使用して立ち往生します。 2つの主な対応計画があります。
1）代わりに新しいライン文字を手動で削除し、 /n newlineを使用します。このソリューションは、ページに新しいライン効果があります。
2）システムラインブレーク文字を追加 /前に、このスキームにはページにラインブレーク効果がありません
（5）歌詞をスクロールするときに遭遇する問題
歌詞が正常に追加された後、完全に表示されますが、音楽と同期する必要があります。現在の再生時間と比較すると、対応する歌詞リストがどれだけ上方に移動するか、歌詞が空のとき、最終的な境界判断、そしてこれらすべての問題が解決された後、ループ再生が現れ、歌詞が再び表示されることはありません。長い間、私はそこに行きました。それは、loop = trueの場合、終了したイベントを聞くことができなかったためです。方法がなかったので、ループを放棄して、終了したイベントにループの判断を追加することしかできませんでした。
まあ、それは非常に良く、完璧に表示され、私は少し興奮しています。どこでも少し乱雑で、テストでは問題があるかどうかが示されています。終了することが可能だと思ったら、別の間違いを犯しました[intifference.jpg]ので、調整しましょう。最初にエラーの理由を見つけます。 F12開発者ツール（上記のBaiduに行きました）では、2つの歌詞が同時に追加されていることがわかりました。犯人が見つかった、setimeout。それは再帰的な呼び出しであるため、CLCLEARTIMEOUTをクリアするために必要です。わかりました、基本的に今は問題ありません。
後で：
ああ、そして、私は最近レッドディアに魅了されているので、私はプレーヤーを「モロッコプレーヤー」と名付けました〜[ビッグブラザービハート]このデモをするのに3日かかり、歌詞だけが半分以上調整されました。そして、あなたは、遭遇する主な問題は歌詞の展示問題であり、私は酔っていたことがわかります。しかし、何があっても、私はついにそれを作りました。それがついに正常に展開されたことを見て、達成感はまだ非常に良かった。それは完成しましたが、私がこのブログを書いていたように、私は再びエラーOrzを見つけました。
上記は、編集者がHTML5+Boostrapを使用してシンプルな音楽プレーヤーを作成するために紹介したものです。私はそれが誰にでも役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は、すべての人に時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！