Utilisez la technologie frontale la plus simple pour créer un simple lecteur de musique-tutoriel HTML-php.cn

Utilisez la technologie frontale la plus simple pour créer un simple lecteur de musique

php中世界最好的语言

Libérer： 2018-03-08 14:27:58

original

3934 Les gens l'ont consulté

Cette fois, je vais vous montrer comment utiliser la technologie frontale la plus simple pour créer un simple lecteur de musique. Quelles sont les précautions concernant l'utilisation de la technologie frontale pour créer un simple lecteur de musique. est un cas pratique. Jetons un coup d’oeil.

La musique de ce lecteur est obtenue via l'API de Douban FM. Nous pouvons écouter de manière aléatoire n'importe quelle musique sur Douban FM.

partie html
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>

Copier après la connexion

Je n'écrirai pas le code CSS ici Vous pouvez consulter le fichier source directement ou le consulter auprès du développeur. outils. Si vous avez des questions, vous pouvez m'envoyer un message en privé.

partie js
Code 1 (contrôle de lecture) :

//播放控制
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();
$(&#39;.btn1&#39;).removeClass(&#39;m-play&#39;).addClass(&#39;m-pause&#39;);
}
function pause(){
myAudio.pause();
$(&#39;.btn1&#39;).removeClass(&#39;m-pause&#39;).addClass(&#39;m-play&#39;);
}

Copier après la connexion

Code 2 (ajax pour obtenir la musique Douban FM) :

//获取随机频道信息
function getChannel(){
$.ajax({
url: &#39;http://api.jirengu.com/fm/getChannels.php&#39;,
dataType: &#39;json&#39;,
Method: &#39;get&#39;,
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
$(&#39;.record&#39;).text(channelname);
$(&#39;.record&#39;).attr(&#39;title&#39;,channelname);
$(&#39;.record&#39;).attr(&#39;data-id&#39;,channelId);//将频道ID计入data-id中
getmusic();
}
})
}
// 通过ajax获取歌曲
function getmusic(){
$.ajax({
url: &#39;http://api.jirengu.com/fm/getSong.php&#39;,
dataType: &#39;json&#39;,
Method: &#39;get&#39;,
data:{
&#39;channel&#39;: $(&#39;.record&#39;).attr(&#39;data-id&#39;)
},
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;
$(&#39;audio&#39;).attr(&#39;src&#39;,url);
$(&#39;.musicname&#39;).text(title);
$(&#39;.musicname&#39;).attr(&#39;title&#39;,title)
$(&#39;.musicer&#39;).text(author);
$(&#39;.musicer&#39;).attr(&#39;title&#39;,author)
$(".background").css({
&#39;background&#39;:&#39;url(&#39;+bgPic+&#39;)&#39;,
&#39;background-repeat&#39;: &#39;no-repeat&#39;,
&#39;background-position&#39;: &#39;center&#39;,
&#39;background-size&#39;: &#39;cover&#39;,
});
play();//播放
}
})
};

Copier après la connexion

Remarque : Douban restreindra notre accès, alors assurez-vous d'ajouter sous la balise Code 3 (Contrôle de la barre de progression) :

La balise audio elle-même en HTML5 fournit la fonction de barre de progression et la fonction de contrôle du volume. Ici, j'ai configuré moi-même la barre de progression pour le plaisir. belle interface, mais il n'y a pas encore de contrôle du volume. Ajoutez, vous pouvez l'ajouter vous-même.

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;
$(&#39;.progressbar&#39;).width(length+&#39;%&#39;);//设置进度条长度
//自动下一曲
if(myAudio.currentTime == myAudio.duration){
getmusic()
}
}

Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment transformer le navigateur en éditeur

Comment utiliser Python pour déterminer la similarité des images

script javascript utilisé pour télécharger des images

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!