MP3_html/css_WEB-ITnose とエレガントな特殊効果
レンダリングは非常に重要です
曲は最近人気の太陽の末裔のオリジナル曲6曲から選ばれています。正式チャンネルで放送を聴く権利を取得しました(20元で購入しました、笑) 非営利かつ個人使用なら大丈夫です~~~
Rendering.png
liezi
こちらです。 a栗 seaseeYoul -Audio
Description
これは、html+css+js を使用して完成した MP3 の Web バージョンです。このクリは、前の曲、次の曲、いいね、ミュート、プレイリストの表示、曲のリクエスト (再生するにはプレイリスト内の曲をクリック) を実装します。これらの機能はCDの回転を模したもので、インターフェースのデザインから機能まですべて個人で仕上げています。現在、IE を除くすべての主要なブラウザと互換性があります。システムに問題があるため、IE はテストできません。 。 。すべてのコードは下部の付録にあります。
素材を準備します
- sublime text3
- googleブラウザchrome、またはcss3をサポートするその他のブラウザ
各機能の実装アイデア
特別な注意とヒント: タイマーを使用する必要があるため、実行時にタイマー関連の操作を行う場合は、必ず最初に前のタイマーをクリアしてください。そうしないと混乱が生じます。いくつかの隠しタグを使用して一部の属性を保存すると、js が簡単になります。たとえば、現在再生中の曲の ID を保存します。Ⅰ: 再生/一時停止関数
再生関数は 4 つの効果を実装します。1 つは音楽の再生と再生ボタンのスタイルの変更です。これは play() を使用して行われます。 メディア タグが所有するメソッド、つまり var _this=document.getElementById('audio'); _this.play(); 。ボタンのスタイルを変更するには、ボタン自体のクラスを変更するだけです。 2 つ目は CD に回転効果を追加することで、css3 によって完了します。 anime-play-state:paused/running;-webkit-animation-play-state:paused/running; を使用して、アニメーションの開始と一時停止を制御します。このクラスの目的は、アニメーションを CD に追加することです。 3 つ目はカウントダウンです。カウントダウンでは、すべての曲の情報を配列に格納するだけで取得できます。 4 つ目はプログレス バーです。プログレス バーはカウントダウンと同じで、タイマーと CSS を使用して完了します。コアコードは次のとおりです:
music_list:[{"address":"1.mp3","lrc":"1.lrc","singer":"纯音乐","name":"Always(Inst)","time":"205"},{"address":"2.mp3","lrc":"2.lrc","singer":"T[伊莱美]","name":"Always","time":"205"},{"address":"3.mp3","lrc":"3.lrc","singer":"CHEN[EXO] & Punch","name":"Everytime","time":"189"},{"address":"4.mp3","lrc":"4.lrc","singer":"金娜英 & Mad Clown","name":"再次见到你","time":"235"},{"address":"5.mp3","lrc":"5.lrc","singer":"纯音乐","name":"再次见到你(Inst)","time":"235"},{"address":"6.mp3","lrc":"6.lrc","singer":"Lyn","name":"With you","time":"254"}]togglePlay: function(){ var _this = document.getElementById('audio'); clearInterval(timer); if($("#play").hasClass("icon-play")){ $("#play").removeClass("icon-play").addClass("icon-pause"); $(".disc").css({"animation-play-state":"running"}); _this.play(); timer = setInterval(audio.count,1000); }else{ $("#play").removeClass("icon-pause").addClass("icon-play"); _this.pause(); clearInterval(timer); $(".disc").css({"animation-play-state":"paused"}); } audio._likes();},前の曲と次の曲の機能の本質は、src が新しい曲を指しているときに、play をクリックして再生することです。音楽も切り替わります。これは jq を使用すると簡単に実現できます。 2 番目のステップは、実際の曲情報を更新することです。 コア コードは次のとおりです。
next:function(){ var _this = document.getElementById('audio'); var _nextMusicId = parseInt($("#musicid").val())+1; _nextMusicId = _nextMusicId > audio.music_list.length-1? 0 :_nextMusicId; $("#musicid").val(_nextMusicId); var nextMusicSrc ="./music/" +audio.music_list[_nextMusicId].address; _this.src = nextMusicSrc; $("#play").addClass("icon-play"); $("#countdown").attr("time",audio.music_list[_nextMusicId].time); $(".singer").html(audio.music_list[_nextMusicId].singer); $(".music-info").html(audio.music_list[_nextMusicId].name); audio.togglePlay();},prev:function(){ var _this = document.getElementById('audio'); var _nextMusicId = parseInt($("#musicid").val())-1; _nextMusicId = _nextMusicId > audio.music_list.length-1? 0 :_nextMusicId; $("#musicid").val(_nextMusicId); var nextMusicSrc ="./music/" +audio.music_list[_nextMusicId].address; _this.src = nextMusicSrc; $("#play").addClass("icon-play"); $("#countdown").attr("time",audio.music_list[_nextMusicId].time); $(".singer").html(audio.music_list[_nextMusicId].singer); $(".music-info").html(audio.music_list[_nextMusicId].name); audio.togglePlay();},ミュートは、メディア タグに付属する属性も使用します。_this.muted = false; をオンにします。ミュート、_this.muted = true; ミュートをオフにします。 [var _this = document.getElementById('audio');] Ⅳ いいね
ハートをクリックして色を赤に変えるのもとても簡単です (クラス変更)。 。はははは~~、プレイリスト内の現在の曲のいいね (カスタマイズ) 属性をいいねに設定します。もう一度クリックしたときに元に戻すだけです。Ⅴ プレイリストの表示
プレイリストを含む div を表示するだけです。どの方法が必要かを決めるのはあなたです。Ⅵ 曲リクエスト
曲リクエストの原則は、実際には前の曲/次の曲と同じですが、前後の曲はアドレスにプラスまたはマイナス 1 を加えたものであるのに対し、曲リクエストは特定の曲を指定することです。Ⅶ付録
すべてのコードはここにあります
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>saeseeYoul-Audio</title> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/font-awesome.min.css"> <link rel="stylesheet" href="css/audio.css"></head><body> <div class="container"> <div class="info"> <span class="icon-music tit"></span> <h3 class="singer">CHEN[EXO]&Punch</h3> <h4 class="music-info">Always(Inst)</h4> <div class="disc"> <h4 class="sign">seaseeYoul.</h4> <div class="cd1"> <div class="cd2"></div> </div> </div> <div class="spinner" id="load"> <div class="bounce1"></div> <div class="bounce2"></div> <div class="bounce3"></div> </div> </div> <div class="action"> <h5 id="countdown" time="205">-00:00</h5> <input type="hidden" value="0" id="musicid"> <audio src="./music/1.mp3" id="audio" controls="controls" preload="auto"></audio> <span class="time"> <i id="time_ring"></i> </span> <ul class="action_button"> <li class="large icon-step-backward" id="prev"></li> <li class="large icon-play" id="play"></li> <li class="large icon-step-forward" id="next"></li> <li class="nomal icon-volume-up" id="mute"></li> <li class="nomal icon-heart-empty" id="likes"></li> <li class="nomal icon-reorder" id="menu"></li> </ul> </div> <ul class="list"></ul> </div> <script src="js/jquery.min.js"></script> <script src="js/audio.js"></script></body></html>
cCss コードはこちらですCss コードはこちらです実際には、考慮されていない 2 つの状態があります。この時点では、MP3 ソングはロードされておらず、再生待ちの状態になっています。このとき、タイマーやその他のエフェクトをクリアして、MP3 の再生が再開されるまで待つ必要があります。 2 つ目は、MP3 が終了を待って再生を再開することです。この時点で、再生状態に戻す必要があります。しかし、ローカルでテストしたところ、ネットワーク速度は比較的良好で、そのような 2 つの条件はまったくありませんでした。 。 。それは測定できません。 。 。私を許してください。 。 。Js codejs コードはこちらです
Ⅷその他の指示
親愛なる友人、気に入ったらいいねしてください~~~
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7677
15
1393
52
1207
24
91
11
HTMLは初心者のために簡単に学ぶことができますか？
Apr 07, 2025 am 12:11 AM
HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。
HTML、CSS、およびJavaScriptの役割：コアの責任
Apr 08, 2025 pm 07:05 PM
HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
HTMLでの開始タグの例は何ですか？
Apr 06, 2025 am 12:04 AM
Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。
HTML、CSS、およびJavaScriptの理解：初心者向けガイド
Apr 12, 2025 am 12:02 AM
webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、
WebアノテーションにY軸位置の適応レイアウトを実装する方法は？
Apr 04, 2025 pm 11:30 PM
Y軸位置Webアノテーション機能の適応アルゴリズムこの記事では、単語文書と同様の注釈関数、特に注釈間の間隔を扱う方法を実装する方法を探ります...
Giteeページ静的なWebサイトの展開に失敗しました：単一のファイル404エラーをトラブルシューティングと解決する方法
Apr 04, 2025 pm 11:54 PM
GiteEpages静的Webサイトの展開が失敗しました：404エラーのトラブルシューティングと解像度Giteeを使用する
CSS3とJavaScriptを使用して、クリック後に周囲の写真を散乱および拡大する効果を実現する方法は？
Apr 05, 2025 am 06:15 AM
画像をクリックした後、散乱と周囲の画像を拡大する効果を実現するには、多くのWebデザインがインタラクティブな効果を実現する必要があります。特定の画像をクリックして周囲を作成してください...
HTML、CSS、およびJavaScript：Web開発者に不可欠なツール
Apr 09, 2025 am 12:12 AM
HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。
