jQuery === 實現了鋼琴效果
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
div{
height:100px;
width:100px;
position: absolute;
left:300px;
top:300px;
background:red;
}
div:nth-of-type(2){
left:400px;
background:orange;
}
div:nth-of-type(3){
left:500px;
background:yellow;
}
div:nth-of-type(4){
left:600px;
background:green;
}
div:nth-of-type(5){
left:700px;
background:#0ff;
}
div:nth-of-type(6){
left:800px;
background:blue;
}
div:nth-of-type(7){
left:900px;
background:purple;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<audio src="audio/1.mp3"></audio>
<audio src="audio/2.mp3"></audio>
<audio src="audio/3.mp3"></audio>
<audio src="audio/4.mp3"></audio>
<audio src="audio/5.mp3"></audio>
<audio src="audio/6.mp3"></audio>
<audio src="audio/7.mp3"></audio>
<script src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
//window 點擊 ，自動播放
var music = '1155665 4433221 5544332 5544332 1155665 4433221';
var sentences = music.split(" ");
$(window).on('click',function(){
play_yiju(sentences[0])
})
var count = 0 ; // 用來表示當前播放到哪一句了,當執行一次函數的時候 證明播放完一句了。
function play_yiju(yiju){
if(count === sentences.length){ //當我的計數器=我所有音樂的長度了，證明播放完畢，return
return;
}
count++ // 播放一次count++
//獲取每一句里面的字符，與 div的索引有關系，與audio的索引有關系
// 獲取到每一句 里面的每一個音符
var notes = yiju.split("");//獲取了包括每個音符的數組
//遍歷這個數組
for(let i = 0 ; i < notes.length;i++){
//獲取索引、、在第一個音符調用自己的audio 后 500毫秒之后再調用第二個，才能形成音樂的效果，所以在這里要使用一個setTimeout 函數
// 第一個 0 * 500 第二個 1 * 500ms后播放，第三個 2 * 500 ms后播放 //所以時間間隔應該是 500 * i
setTimeout(function(){
//獲取對應的div 索引 和 audio的索引
var index = notes[i]-1;
//加載音頻
$('audio')[index].load();
//播放音頻
$('audio')[index].play();
//給div 加上動畫
$('div').eq(index).animate({
height: 300,
top: 100
},function(){
$('div').eq(index).animate({
height:100,
top:300
})
})
if(i === notes.length -1){ // 當我的i 等於了最后一個音符，這個時候要開始播放下一段了，間隔500ms
(
setTimeout(()=> {
play_yiju(sentences[count])
},500)
)
}
},500 * i)
}
}
</script>
</body>
</html>