JS jQuery === 实现钢琴效果
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>
