ホームページ >ウェブフロントエンド >htmlチュートリアル >最も単純なフロントエンド技術を使用して、単純な音楽プレーヤーを作成する
今回は、最も簡単なフロントエンド技術を使用して簡単な音楽プレーヤーを作成する方法を説明します。フロントエンド技術を使用して簡単な音楽プレーヤーを作成する際の注意事項は次のとおりです。見てみましょう。
このプレーヤーの音楽は Douban FM の API を通じて取得され、Douban FM 上の任意の音楽をランダムに聴くことができます。
html part
code:
<div class="wrapper"> <div class="background"></div> <div class="content"> <audio src=""></audio> <div class="music-massage"> <p class="musicname"></p> <p class="musicer"></p> </div> <div class="music-icon"> <a class="m-icon m-fenxiang colored" href="http://service.weibo.com/share/share.php?title=#_loginLayer_1466697157538" target="new"></a> <span class="m-icon m-star colored"></span> <span class="m-icon m-heart colored"></span> </div> </div> <span class="basebar"> <span class="progressbar"></span> </span> <div class="controls"> <div class="play-control"> <span class="m-icon m-play btn1" title="播放/暂停"></span> <span class="m-icon m-change btn2" title="换频道"></span> <span class="m-icon m-next btn3" title="换曲"></span> </div> <div class="music-control"> <span class="m-icon m-xunhuan colored"></span> <span class="m-icon m-radom colored"></span> </div> </div> </div>
ここでは CSS コードを書きません。ソース ファイルを直接見ることも、開発者ツールから見ることもできます。ご質問がございましたら、個別にメッセージをお送りください。
js パート
コード 1 (再生制御):
//播放控制 var myAudio = $("audio")[0]; // 播放/暂停控制 $(".btn1").click(function(){ if (myAudio.paused) { play() } else { pause() } }); // 频道切换 $(".btn2").click(function(){ getChannel(); }); // 播放下一曲音乐 $(".btn3").click(function(){ getmusic(); }); function play(){ myAudio.play(); $('.btn1').removeClass('m-play').addClass('m-pause'); } function pause(){ myAudio.pause(); $('.btn1').removeClass('m-pause').addClass('m-play'); }
コード 2 (Ajax で Douban FM 音楽を取得):
//获取随机频道信息 function getChannel(){ $.ajax({ url: 'http://api.jirengu.com/fm/getChannels.php', dataType: 'json', Method: 'get', success: function(response){ var channels = response.channels; var num = Math.floor(Math.random()*channels.length); var channelname = channels[num].name;//获取随机频道的名称 var channelId = channels[num].channel_id;//获取随机频道ID $('.record').text(channelname); $('.record').attr('title',channelname); $('.record').attr('data-id',channelId);//将频道ID计入data-id中 getmusic(); } }) } // 通过ajax获取歌曲 function getmusic(){ $.ajax({ url: 'http://api.jirengu.com/fm/getSong.php', dataType: 'json', Method: 'get', data:{ 'channel': $('.record').attr('data-id') }, success: function (ret) { var resource = ret.song[0], url = resource.url, bgPic = resource.picture, sid = resource.sid,//获取歌词的参数 ssid = resource.ssid,//获取歌词的参数 title = resource.title, author = resource.artist; $('audio').attr('src',url); $('.musicname').text(title); $('.musicname').attr('title',title) $('.musicer').text(author); $('.musicer').attr('title',author) $(".background").css({ 'background':'url('+bgPic+')', 'background-repeat': 'no-repeat', 'background-position': 'center', 'background-size': 'cover', }); play();//播放 } }) };
注: Douban はアクセスを制限するため、必ず 93f0f5c25f18dab9d176bd4f6de5d30e を使用してください。タグ追加 f92061d5604e29b283bed79e420fcc50
コード 3 (プログレス バー コントロール):
setInterval(present,500) //每0.5秒计算进度条长度 $(".basebar").mousedown(function(ev){ //拖拽进度条控制进度 var posX = ev.clientX; var targetLeft = $(this).offset().left; var percentage = (posX - targetLeft)/400100; myAudio.currentTime = myAudio.duration * percentage/100; }); function present(){ var length = myAudio.currentTime/myAudio.duration100; $('.progressbar').width(length+'%');//设置进度条长度 //自动下一曲 if(myAudio.currentTime == myAudio.duration){ getmusic() } }
html5 の audio タグ自体は、プログレス バー機能とボリューム コントロール機能を提供します。ここでは、 I インターフェイスの見栄えを良くするために、ボリューム コントロールはまだ追加されていません。
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
関連書籍:
以上が最も単純なフロントエンド技術を使用して、単純な音楽プレーヤーを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。