<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>音乐播放器</title> <style type="text/css"> *{ margin: 0; padding: 0; } body{ width: 320px; overflow: hidden; margin: 20px auto; } header,footer{ height: 40px; line-height: 40px; background-color: orange; text-align: center; } li{ height: 50px; line-height: 50px; border: 1px solid red; border-top: none; font-size: 15px; text-indent: 20px; list-style: none; } #ado{ width: 100%; height: 20px; margin-top: 10px; } .Sty { background-Color : Pink ; } </ style > </ head > < body > < header > Music player </ header > < sectionTop > < UL > < Li > Dandelion </ Li > < li > sunny </ li > < li > say good cry </ li > <at the> English </ li > < li > laugh Travels </ li > </ ul > </ Section > < Audio src = "" the above mentioned id = "ADO" Controls = "" > </ Audio > < footer > currently playing is : < span ID = "CON" > </ span > </ footer > < Script > var LIS = Document.querySelectorAll ( ' him' ) Var ADO = document.querySelector ( ' #ado ' ) var CON = document.querySelector ( ' #CON ' ) var ARR = [ ' Audio / pugongyingdeyueding.mp3 ' , ' Audio / qingtian.mp3 ' , ' Audio / shuohaobuku .mp3 ' , ' Audio / Sophie Rose - Famous.mp3 ' , ' Audio / xiyouji.mp3 ' ] for ( var i=0;i<lis.length;i++){ lis[i].onclick=function(){ for(var i=0;i<lis.length;i++){ if(this==lis[i]){ lis[i].className='sty' ado.src=arr[i]; ado.play(); con.innerHTML = lis [i] .innerHTML; @ AutoPlay: var A = I; ado.onended=function(){ A ++ ; IF (A > lis.length - . 1 ) { // If the music player to the last, when a music jump to the first piece of music A = 0 ; } for(var j=0;j<lis.length;j++){ lis[j].className='' } con.innerHTML=lis[a].innerHTML; ado.src=arr[a] ado.play() lis[a].className='sty' } }else{ lis[i].className='' } } } } </script> </body> </html>
Simple function music player
Guess you like
Origin www.cnblogs.com/yueranran/p/12129855.html
Ranking