Paste_Image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.face{
width: 500px;
height: 300px;
margin: 0px auto;
}
.face ul{
list-style-type: none;
}
.face li{
width: 50px;
height: 180px;
background-color: orange;
float: left;
border: 2px solid black;
box-shadow: 2px 2px 2px red inset;
}
.face li:hover{
background-color: darkorange;
}
.box{
display: none;
}
.buttonAll{
width: 200px;
height: 50px;
margin: 100px auto;
overflow: hidden;
}
.buttonAll input{
width: 50px;
height: 30px;
margin-left: 10px;
float: left;
}
</style>
</head>
<body>
<div class="buttonAll">
<input type="button" name="btn" id="btn1" value="录制" />
<input type="button" name="btn" id="btn2" value="播放" />
</div>
<div class="box"></div>
<div class="face">
<ul>
<li class="key"></li>
<li class="key"></li>
<li class="key"></li>
<li class="key"></li>
<li class="key"></li>
<li class="key"></li>
<li class="key"></li>
<li class="key"></li>
<li class="key"></li>
</ul>
</div>
<script type="text/javascript">
//添加音频
var str ="ASDFGHJKL";
var box = document.querySelector(".box");
for (var i = 1;i < 10; i++) {
box.innerHTML += `
<audio class="music" controls="controls">
<source src="music/`+ i +`.ogg" type="audio/mp3"></source>
<source src="music/`+ i +`.ogg" type="audio/ogg"></source>
</audio>`
}
// 键盘触发部分
// 创建数据结构
var keyMap = new Map();
for (var i = 0; i < str.length; i++ ) {
keyMap.set(str.charCodeAt(i),i);
}
var musics = document.querySelectorAll(".music");
var keys = document.querySelectorAll(".key");
//录制音乐
var musicArr = [];
var musicTimeArr = [];
var button1 = document.getElementById("btn1");//录制/停止
var button2 = document.getElementById("btn2");//播放
playMusic(9);
//录制/停止
//初始化时间
var baseTime;
//控制录音
var flag = false;
var playFlag = false;
button1.onclick = function () {
if (this.value == "录制") {
flag = true;
//初始化时间
var date = new Date();
baseTime = date.getTime();
musicArr = [];
musicTimeArr = [];
this.value = "停止";
playFlag = false;
}else{
flag = false;
playFlag = true;
this.value = "录制";
playFlag = true;
}
}
//播放按钮
button2.onclick = function () {
if (playFlag) {
console.log(musicTimeArr);
rePlayer(musicArr);
}
playFlag = false;
}
//实现重新播放
function rePlayer(arr){
for (var i = 0;i < musicTimeArr.length;i++) {
(function (i,timeA) {
setTimeout(function timer() {
musics[musicArr[i]].currentTime = 0;
musics[arr[i]].play();
},timeA)
})(i,musicTimeArr[i]);
}
}
//实现按键配音
function playMusic(count){
for (var i = 0;i < count; i++) {
(function (i) {
//鼠标事件触发
keys[i].onmousedown = function () {
change(i);
this.onmouseup = function () {
changeColor ();
}
};
})(i)
}
//键盘事件触发
document.onkeydown = function (e) {
var evt = e || window.event;
// 获取下标
var i = keyMap.get(evt.keyCode);
if (i != undefined) {
change(i);
}
}
document.onkeyup = function (e) {
changeColor ();
}
}
//实现事件效果
function change (i) {
musics[i].currentTime = 0;
musics[i].play();
musicArr.push(i);
changeColor ();
keys[i].style.backgroundColor = "darkorange";
//录制时间间隔
var date = new Date();
var crrentTime = date.getTime()
var intervalTime = crrentTime - baseTime;
if (flag) {
musicTimeArr.push(intervalTime);
}
}
//颜色还原
function changeColor () {
for (var item of keys) {
item.style.backgroundColor = "orange";
}
}
</script>
</body>
</html>