gpt4 book ai didi

Javascript实现打鼓效果

转载 作者:qq735679552 更新时间:2022-09-27 22:32:09 31 4
gpt4 key购买 nike

CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章Javascript实现打鼓效果由作者收集整理,如果你对这篇文章有兴趣,记得点赞哟.

本文实例为大家分享了Javascript实现打鼓效果的具体代码,供大家参考,具体内容如下 。

Javascript实现打鼓效果

按住响应的键盘显示不同的声音 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
< div class = "keys" >
   < div data-key = "65" class = "key" >
    < kbd >A</ kbd >
    < span class = "sound" >clap</ span >
   </ div >
   < div data-key = "83" class = "key" >
    < kbd >S</ kbd >
    < span class = "sound" >hihat</ span >
   </ div >
   < div data-key = "68" class = "key" >
    < kbd >D</ kbd >
    < span class = "sound" >kick</ span >
   </ div >
   < div data-key = "70" class = "key" >
    < kbd >F</ kbd >
    < span class = "sound" >openhat</ span >
   </ div >
   < div data-key = "71" class = "key" >
    < kbd >G</ kbd >
    < span class = "sound" >boom</ span >
   </ div >
   < div data-key = "72" class = "key" >
    < kbd >H</ kbd >
    < span class = "sound" >ride</ span >
   </ div >
   < div data-key = "74" class = "key" >
    < kbd >J</ kbd >
    < span class = "sound" >snare</ span >
   </ div >
   < div data-key = "75" class = "key" >
   
    < kbd >K</ kbd >
    < span class = "sound" >tom</ span >
   </ div >
   < div data-key = "76" class = "key" >
    < kbd >L</ kbd >
    < span class = "sound" >tink</ span >
   </ div >
   </ div >
 
   < audio data-key = "65" src = "sounds/clap.wav" ></ audio >
   < audio data-key = "83" src = "sounds/hihat.wav" ></ audio >
   < audio data-key = "68" src = "sounds/kick.wav" ></ audio >
   < audio data-key = "70" src = "sounds/openhat.wav" ></ audio >
   < audio data-key = "71" src = "sounds/boom.wav" ></ audio >
   < audio data-key = "72" src = "sounds/ride.wav" ></ audio >
   < audio data-key = "74" src = "sounds/snare.wav" ></ audio >
   < audio data-key = "75" src = "sounds/tom.wav" ></ audio >
   < audio data-key = "76" src = "sounds/tink.wav" ></ audio >

css部分:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
html {
  font-size : 10px ;
  background : url ( '../img/background.jpg' ) bottom center ;
  background- size : cover;
}
 
body,html {
  margin : 0 ;
  padding : 0 ;
  font-family : sans-serif ;
}
 
.keys {
  display : flex;
  flex: 1 ;
  min-height : 100 vh;
  align-items: center ;
  justify- content : center ;
}
 
.key {
  border : . 4 rem solid black ;
  border-radius: . 5 rem;
  margin : 1 rem;
  font-size : 1.5 rem;
  padding : 1 rem . 5 rem;
  transition: all . 07 s ease;
  width : 10 rem;
  text-align : center ;
  color : white ;
  background : rgba( 0 , 0 , 0 , 0.4 );
  text-shadow : 0 0 . 5 rem black ;
}
 
.playing {
  transform: scale( 1.1 );
  border-color : #ffc600 ;
  box-shadow: 0 0 1 rem #ffc600 ;
}
 
kbd {
  display : block ;
  font-size : 4 rem;
}
 
.sound {
  font-size : 1.2 rem;
  text-transform : uppercase ;
  letter-spacing : . 1 rem;
  color : #ffc600 ;
}

第一步实现按下键盘实现,声音的播放 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
window.addEventListener( "keydown" , function (e){
    console.log(e.keyCode);
    const audio=document.querySelector(`audio[data-key= "${e.keyCode}" ]`);
    const key=document.querySelector(`div[data-key= "${e.keyCode}" ]`)
    //每次播放完初始化
     if (!audio) return ;
     audio.currentTime = 0;
     audio.play();
 
      key.classList.add( 'playing' );
 
      setTimeout( function (){
      key.classList.remove( 'playing' );
      },70);
    
     //按键之后移出效果
})

keyCode对应图 。

Javascript实现打鼓效果

Javascript实现打鼓效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我.

原文链接:https://blog.csdn.net/qq_41309350/article/details/113335998 。

最后此篇关于Javascript实现打鼓效果的文章就讲到这里了,如果你想了解更多关于Javascript实现打鼓效果的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com