ホームページ > 記事 > ウェブフロントエンド > 音楽プレーヤーを実装するコード (html5 css3 jquery)_jquery
以下のレンダリングをご覧ください。これはどのようにして実現されたのでしょうか?今回は私の宝物、リサが歌うエンジェルビートのエピソードをシェアします。この音楽プレーヤーを実装するには、html5、css、および jquery を使用します。
宝物、リサが歌うエンジェルビートの間奏
最後に、このことの書き方を簡単に説明する前に、私は上海出身の 24 歳の男性です。条件は、穏やかな性格です。 。 。 (500文字省略)
<div class="Music"> <div class="MusicPlaySound"> <img class="MusicPlayBg" src="image/music/zsy.png" /> <img class="MusicPlayProcess rotate" src="image/music/yyjd.png" /> <div class="MusicPlayBox"> <h3 class="title">一番の宝物</h3> <p class="name">Lisa(Yui final ver)</p> <div class="MusicPic"> <img class="MusicPicName PicNameRotate" src="image/music/yifan.jpg" /> <img class="MusicPicButton" src="image/music/pause.png" /> </div> <div class="Share icon">分享</div> <div class="Next icon">切歌</div> </div> </div> <audio src="music/Yuiki.mp3" autoplay=""></audio> </div>
HTML 部分は単にスキップされます。 。 。 。基本的には書けます。 。 。
.MusicPlayProcess.rotate{animation:rotate 30s infinite linear;} .MusicPlayProcess.pause{animation-play-state:paused; -webkit-animation-play-state:paused;} .MusicPicName.PicNameRotate{animation:rotate 4s infinite linear;} .MusicPicName.pause{animation-play-state:paused; -webkit-animation-play-state:paused;} @keyframes rotate{ from{ transform:rotate(0deg)} to{ transform:rotate(360deg)} }
CSS 部分に興味深いものを選択してください
これらのいくつかの CSS3 アニメーションについて。 。 。 。上のもの
この 30 秒を曲の長さに変更すると、プログレスバーになります O~HOHOHOHO (怠け者には怠惰なやり方がある)
無限、無制限の再生をご存知ですか?
互換性には欠陥がありますが、それ以外は何もありません
$(function(){ var play=1; $(".MusicPicButton").click(function(){ if(play==0){ $(this).attr("src","image/music/pause.png") $(".MusicPlayProcess").removeClass("pause") $(".MusicPicName").removeClass("pause") $("audio").get(0).play(); play=1; }else{ $(this).attr("src","image/music/play.png") $(".MusicPlayProcess").addClass("pause") $(".MusicPicName").addClass("pause") play=0; $("audio").get(0).pause(); } }) })
これは JQ 部分です
現在のステータスが 1 再生中 0 一時停止中であることを確認してください
以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。