ホームページ >ウェブフロントエンド >htmlチュートリアル >MP3_html/css_WEB-ITnose とエレガントな特殊効果
MP3_html/css_WEB-ITnose とエレガントな特殊効果
- WBOYオリジナル
- 2016-06-24 11:22:041209ブラウズ
レンダリングは非常に重要です
曲は最近人気の太陽の末裔のオリジナル曲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();}, ⅢMuteミュートは、メディア タグに付属する属性も使用します。_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 コードはこちらです
Ⅷその他の指示
親愛なる友人、気に入ったらいいねしてください~~~