js钢琴（含钢琴按键音效包）

键盘不够那么多按键，所以也做了鼠标点击事件

CSS

<style type="text/css">div,ul,li{margin: 0;padding: 0;}ul,li{list-style: none;cursor: pointer;}div{width: 1000px;overflow: hidden;margin: auto;}div ul{width: 14.28%;overflow: hidden;float: left;}div ul li{width: 100%;height: 40px;text-align: center;line-height: 40px;border: 1px solid skyblue;}
</style>

HTML

<body><div><ul><li>A0</li><li>A1</li><li>A2</li><li>A3</li><li>A4</li><li>A5</li><li>A6</li><li>A7</li></ul><ul><li>B0</li><li>B1</li><li>B2</li><li>B3</li><li>B4</li><li>B5</li><li>B6</li><li>B7</li></ul><ul><li>C1</li><li>C2</li><li>C3</li><li>C4</li><li>C5</li><li>C6</li><li>C7</li><li>C8</li></ul><ul><li>D1</li><li>D2</li><li>D3</li><li>D4</li><li>D5</li><li>D6</li><li>D7</li></ul><ul><li>E1</li><li>E2</li><li>E3</li><li>E4</li><li>E5</li><li>E6</li><li>E7</li></ul><ul><li>F1</li><li>F2</li><li>F3</li><li>F4</li><li>F5</li><li>F6</li><li>F7</li></ul><ul><li>G1</li><li>G2</li><li>G3</li><li>G4</li><li>G5</li><li>G6</li><li>G7</li></ul></div>//只用一个 video 的话 每次按下都会播放新的音频，会切断上一个的尾音，所以每个ui配了一个 video <video class="vid" src="" autoplay></video><video class="vid" src="" autoplay></video><video class="vid" src="" autoplay></video><video class="vid" src="" autoplay></video><video class="vid" src="" autoplay></video><video class="vid" src="" autoplay></video><video class="vid" src="" autoplay></video>
</body>

//用jq比较方便 就用jq写了
$(function(){//点击的时候拿到li的内容，拼接去min文件找对应名字的音频，赋给video //每个事件对应一个 video 不然没尾音，感觉怪怪的$("ul:eq(0) li").click(function(){$(".vid")[0].src = "min/"+$(this).html()+".mp3";});$("ul:eq(1) li").click(function(){$(".vid")[1].src = "min/"+$(this).html()+".mp3";});$("ul:eq(2) li").click(function(){$(".vid")[2].src = "min/"+$(this).html()+".mp3";});$("ul:eq(3) li").click(function(){$(".vid")[3].src = "min/"+$(this).html()+".mp3";});$("ul:eq(4) li").click(function(){$(".vid")[4].src = "min/"+$(this).html()+".mp3";});$("ul:eq(5) li").click(function(){$(".vid")[5].src = "min/"+$(this).html()+".mp3";});$("ul:eq(6) li").click(function(){$(".vid")[6].src = "min/"+$(this).html()+".mp3";});//键盘事件$(window).keypress(function(e){//获取当前的按键var k = e.key.toLowerCase();console.log(k);//按键对应的音频switch(k){case "q":$("ul:eq(2) li:eq(0)").click();break;case "w":$("ul:eq(2) li:eq(1)").click();break;case "e":$("ul:eq(2) li:eq(2)").click();break;case "r":$("ul:eq(2) li:eq(3)").click();break;case "t":$("ul:eq(2) li:eq(4)").click();break;case "y":$("ul:eq(2) li:eq(5)").click();break;case "u":$("ul:eq(2) li:eq(6)").click();break;case "i":$("ul:eq(2) li:eq(7)").click();break;//分割case "d":$("ul:eq(3) li:eq(0)").click();break;case "f":$("ul:eq(3) li:eq(1)").click();break;case "g":$("ul:eq(3) li:eq(2)").click();break;case "h":$("ul:eq(3) li:eq(3)").click();break;case "j":$("ul:eq(3) li:eq(4)").click();break;case "k":$("ul:eq(3) li:eq(5)").click();break;case "l":$("ul:eq(3) li:eq(6)").click();break;}})
})

钢琴键音效：百度云钢琴键音效

js钢琴（含钢琴按键音效包）相关推荐

钢琴低音到高音音效_什么是低音扬声器，中音扬声器和高音扬声器？
钢琴低音到高音音效 Woofers, mid-range speakers, and tweeters are all types of loudspeakers. Most often, all ...
ios 自定义键盘的按键音效和震动效果
问题:有一些应用有这样的需求,自定义键盘按键时增加字符放大效果和音效.震动效果,仿系统键盘: 说明:按键的放大效果,比较简单,这里不做说明,读者可以自己去完成:这里主要介绍下增加按键音效和震动效果: ...
键盘钢琴html代码,Flash键盘钢琴电脑键盘钢琴附键盘钢琴谱
Flash键盘钢琴(电脑键盘钢琴)先下载Flash钢琴,把打开的窗口以较小的形式显示,以方便看着曲谱弹,对了~~一定要让其成为当前的活动的窗口,切换到英文输入法之后,按照下面的曲谱练习即可~~ 最好先 ...
话机按键音效——DTMF生成
拨号音效--DTMF 前言干货前言通常制作话机功能都需要用到0-9*#拨号音效,网上的资源少之又少,有的只是短暂时间的按键音效,文件大小大,音效时间无法自控,因博主最近也在寻找拨号音效,途中频繁 ...
JS基礎：Closure 閉包
JS 基礎:Closure 閉包文章目錄 JS 基礎:Closure 閉包簡介參考正文 IIFE 立即執行函數(Immediately Invoked Functions Expression ...
android10音质,小米10音质音效包
小米10音质音效包下载app,一款专门为小米手机用户们所打造的系统工具,各位米粉可以来下载试试哦,这款小米10音质音效包app支持耳机适配,想要调整音质,在这里完全不是问题,软件操作简单,功能性也比较 ...
Vue.js + Tone.js 开发Web钢琴应用
原文链接最近用Vue + Tone.js做了一款钢琴类web应用,名字定为自由钢琴(AutoPiano),人生如音乐,欢快且自由. 此文权当作该项目的总结和分享~ 项目简介自由钢琴(AutoPia ...
vue + element UI【实战】打字闯关（含按键监听、按键音效、字符匹配、动态样式、结果判定、数据统计、音效获取和剪辑等实用技巧）
效果预览点我在线预览实现思路将目标字符串按字符转换为数组,遍历展示 this.stringLib[this.step].split("").forEach((item) =& ...
js获取及判断按键的方法
js 里面的键盘事件经常用到,所以收集了键盘事件对应的键码来分享下: keyCode 8 = BackSpace BackSpace keyCode 9 = Tab Tab keyCode 12 = ...

js钢琴（含钢琴按键音效包）

js钢琴（含钢琴按键音效包）相关推荐

最新文章

热门文章