このチュートリアルは、主にHTML5への新しい追加を示すためのものです
上の写真は、このオーディオプレーヤーのUIインターフェイスで、曲のプレイリストも隠しています。大きな背景のポートレート画像と曲のスター評価を除いて、プレーヤーのUI全体が写真を使用し、CSSとフォントフェイスによって描かれています。難しいと思われる唯一のことは、CDとディスクの生産です。曲が再生されると、CDとディスクの両方にアニメーションインタラクション効果があります。これは後の部分で説明されます。プレイリストを開くには、プレーヤーのCDをクリックしてください〜
このチュートリアルは、主にHTML5に追加された新しい<Audio>タグとオーディオ要素のDOM APIの使用を示すことであるため、プレーヤーUIの描画はここでは詳しく説明しません。質問がある場合は、ケースのCSSファイルのコメントを自分で表示するか、以下にメッセージを残すことができます。
主な機能：1。プレイ、一時停止、前の曲、次の曲、ボリュームの増加と減少
2。CDをクリックして、プレイリストを開閉
3.再生のためにローカル音楽ファイルをプレイヤーにドラッグできます。
HTML構造
コードをコピーします