MP3_html/css_WEB-ITnose とエレガントな特殊効果-htmlチュートリアル-php.cn

MP3_html/css_WEB-ITnose とエレガントな特殊効果

WBOY

リリース： 2016-06-24 11:22:04

オリジナル

1191 人が閲覧しました

レンダリングは非常に重要です

曲は最近人気の太陽の末裔のオリジナル曲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 コードはこちらです

Js codejs コードはこちらです

Ⅷその他の指示

実際には、考慮されていない 2 つの状態があります。この時点では、MP3 ソングはロードされておらず、再生待ちの状態になっています。このとき、タイマーやその他のエフェクトをクリアして、MP3 の再生が再開されるまで待つ必要があります。 2 つ目は、MP3 が終了を待って再生を再開することです。この時点で、再生状態に戻す必要があります。しかし、ローカルでテストしたところ、ネットワーク速度は比較的良好で、そのような 2 つの条件はまったくありませんでした。。。それは測定できません。。。私を許してください。。。

親愛なる友人、気に入ったらいいねしてください~~~