Dieses Mal bringe ich Ihnen ein natives JS zum Erstellen eines Musikplayers. Was sind die Vorsichtsmaßnahmen für das Erstellen eines nativen JS zum Erstellen eines Musikplayers? Schauen Sie mal rein.
Vorwort
Ich habe kürzlich JS rezensiert und finde, dass Musikplayer ziemlich interessant sind. Heute werde ich unser nativstes JS verwenden, um einen kleinen Musikplayer zu schreiben~ Hauptfunktionen: 1. Unterstützt Schleife und Zufallswiedergabe 2. Unterstützt die Bilddrehung während der Wiedergabe 3. Klicken Sie auf denFortschrittsbalken , um die Wiedergabeposition und Lautstärke anzupassen
4. Zeigen Sie die Musikwiedergabezeit an 5. Unterstützt das Wechseln von Liedern: vorheriges Lied, nächstes Lied, klicken Sie auf den Liedtitel, um die Wiedergabe anzuhalten usw. ~Es gibt zwei Möglichkeiten, Musik hinzuzufügen:
① Sie können ein Audio-Tag verwenden, sodass die Adresse der Musik in einem Array gespeichert werden soll ②Die zweite Möglichkeit besteht darin, ein paar Audio-Tags hinzuzufügen, wenn mehrere Lieder vorhanden sind, und dann die gesamte Hintergrundmusik abzurufen (im Beispiel fügen wir zuerst drei Musikstücke hinzu und fügen sie in ein Array ein. Natürlich können Sie jedes beliebige Lied auswählen du magst.<audio id="play1"> <source src="auto/旅行.mp3"></source> </audio> <audio id="play2"> <source src="auto/薛明媛,朱贺 - 非酋.mp3"></source> </audio> <audio id="play3"> <source src="auto/杨宗纬 - 越过山丘.mp3"></source> </audio>
play1=document.getElementById("play1");
play2=document.getElementById("play2");
play3=document.getElementById("play3");
play=[play1,play2,play3];1 Klick zum Abspielen, Pause
Das erste, worüber wir uns im Klaren sein sollten, ist, dass beim Klicken auf die Schaltfläche zum Spielen Folgendes erreicht werden sollte: ①Die Musik beginnt zu spielen ②Der Fortschrittsbalken beginnt sich vorwärts zu bewegen, während das Lied abgespielt wird ③Das Bild beginnt sich zu drehen, während das Lied abgespielt wird ④Die Wiedergabezeit beginnt Dementsprechend können wir die Wiedergabe pausieren lassen, wenn wir erneut auf die Wiedergabetaste klicken: ①Lied pausiert; ② Halten Sie gleichzeitig den Fortschrittsbalken an ③ Unterbrechen Sie gleichzeitig die Wiedergabezeit ④Das Bild hört auf, sich zu drehen Hinweis: Die oben genannten Start- und Pausenvorgänge müssen synchronisiert werden! Nachdem wir unsere Ideen geklärt haben, können wir sie einzeln umsetzen~Klicken Sie auf Wiedergabe/Pause
//点击播放、暂停
function start(){
minute=0;
if(flag){
imagePause();
play[index].pause();
}else{
rotate();
play[index].play();
reducejindutiao();
addtime();
jindutiao();
for (var i=0;i<play.length;i++) {
audioall[i].style.color="white";
}
audioall[index].style.color="red";
}
}Bilddrehung
//图片旋转，每30毫米旋转5度
function rotate(){
var deg=0;
flag=1;
timer=setInterval(function(){
image.style.transform="rotate("+deg+"deg)";
deg+=5;
if(deg>360){
deg=0;
}
},30);
}-Timer . Wenn die Musik angehalten wird, wird imagePause() aufgerufen und der Bildrotations-Timer gelöscht:
function imagePause(){
clearInterval(timer);
flag=0;
}Fortschrittsbalken
Definieren Sie zunächst zwei Ps mit derselben Breite, Länge und unterschiedlichen Farben. Verwenden Sie das Attributfunction jindutiao(){
//获取当前歌曲的歌长
var lenth=play[index].duration;
timer1=setInterval(function(){
cur=play[index].currentTime;//获取当前的播放时间
fillbar.style.width=""+parseFloat(cur/lenth)*300+"px";
},50)
}Spielzeit
Auch die Wiedergabezeit von Musik kann jederzeit mit currenttime geändert werden, es ist jedoch zu beachten, dass die Zeiteinheit von currenttime Sekunden ist.//播放时间
function addtime(){
timer2=setInterval(function(){
cur=parseInt(play[index].currentTime);//秒数
var temp=cur;
minute=parseInt(temp/60);
if(cur%60<10){
time.innerHTML=""+minute+":0"+cur%60+"";
}else{
time.innerHTML=""+minute+":"+cur%60+"";
}
},1000);
}2 Lieder schneidenIch habe zwei Möglichkeiten zum Schneiden von Liedern gewählt:
①Klicken Sie auf die Schaltflächen „Vorheriges Lied“ und „Nächstes Lied“, um zwischen den Liedern zu wechseln //上一曲
function reduce(){
qingkong();
reducejindutiao();
pauseall();
index--;
if(index==-1){
index=play.length-1;
}
start();
}
//下一曲
function add(){
qingkong();
reducejindutiao();
pauseall();
index++;
if(index>play.length-1){
index=0;
}
start();
} //点击文字切歌
function change(e){
var musicName=e.target;
//先清空所有的
for (var i=0;i<audioall.length;i++) {
audioall[i].style.color="white";
if(audioall[i]==musicName){
musicName.style.color="red";
qingkong();
reducejindutiao();
pauseall();
index=i;
start();
}
}
}//将进度条置0
function reducejindutiao(){
clearInterval(timer1);
fillbar.style.width="0";
} function qingkong(){//清空所有的计时器
imagePause();
clearInterval(timer2);
}3点击进度条调整播放进度及音量
首先应该理清一下逻辑：当点击进度条的时候，滚动条的宽度应该跟鼠标的offsetX一样长，然后根据进度条的长度来调整听该显示的时间。
(1) 给滚动条的p添加一个事件，当滚动条长度变化的时候歌曲的当前播放的时间调整，300是滚动条的总长度；
//调整播放进度
function adjust(e){
var bar=e.target;
var x=e.offsetX;
var lenth=play[index].duration;
fillbar.style.width=x+"px";
play[index].currentTime=""+parseInt(x*lenth/300)+"";
play[index].play();
}(2) 改变音量的滚动条，跟改变播放时间类似，利用volume属性（值为零到一）；
//调整音量大小
function changeVolume(e){
var x=e.offsetX+20;
play[index].volume=parseFloat(x/200)*1;
//改变按钮的位置
volume3.style.left=""+x+"px";
}4随机、循环播放
循环播放音乐的时候，直接index++当index的范围超过歌曲的长度的时候，index=0重新开始。随机播放的函数类似，当歌曲播放完毕的时候，随机产生一个0到play.length的数字就可以了。
//随机播放歌曲
function suiji(e){
var img=e.target;
img2.style.border="";
img.style.border="1px solid red";
}
//顺序播放
function shunxu(e){
var img=e.target;
img1.style.border="";
img.style.border="1px solid red";
clearInterval(suijiplay);
shunxuplay=setInterval(function(){
if(play[index].ended){
add();
}
},1000);
}这样我们整个音乐播放器就完成了，大家可以自己写一个好看的界面，就更完美了
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
Das obige ist der detaillierte Inhalt vonErstellen Sie einen Musikplayer mit nativem JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
