이번에는 가장 간단한 프론트엔드 기술을 사용하여 간단한 뮤직 플레이어를 만드는 방법을 보여드리겠습니다. 프론트엔드 기술을 사용하여 간단한 뮤직 플레이어를 만들 때 사용할 주의 사항은 무엇입니까? 살펴보자.
이 플레이어의 음악은 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 part
Code 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'); }
Code 2(Douban FM 음악을 얻기 위한 ajax):
//获取随机频道信息 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은 액세스를 제한하므로
태그 추가코드 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의 오디오 태그 자체는 여기에서 진행률 표시줄 기능과 볼륨 제어 기능을 제공합니다. 인터페이스를 보기 좋게 만들기 위해 진행률 표시줄을 설정했습니다. 볼륨 컨트롤은 아직 추가되지 않았습니다.
이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
관련 읽기:
위 내용은 가장 간단한 프런트 엔드 기술을 사용하여 간단한 음악 플레이어 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!