整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

发布一个网页钢琴源码

发布一个网页钢琴源码

线查看网页钢琴

效果图

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>网页钢琴</title>

<style>

body {

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

margin: 0;

background-color: #f0f0f0;

font-family: Arial, sans-serif;

}

.piano {

display: flex;

background-color: #000;

padding: 20px;

border-radius: 10px;

}

.key {

width: 40px;

height: 150px;

margin: 0 2px;

background-color: #fff;

border: 1px solid #000;

border-radius: 0 0 5px 5px;

cursor: pointer;

transition: background-color 0.1s;

}

.key.black {

width: 30px;

height: 100px;

background-color: #000;

margin-left: -15px;

margin-right: -15px;

z-index: 1;

}

.key:active, .key.active {

background-color: #ddd;

}

.key.black:active, .key.black.active {

background-color: #333;

}

</style>

</head>

<body>

<div class="piano">

<div class="key" data-note="C4"></div>

<div class="key black" data-note="C#4"></div>

<div class="key" data-note="D4"></div>

<div class="key black" data-note="D#4"></div>

<div class="key" data-note="E4"></div>

<div class="key" data-note="F4"></div>

<div class="key black" data-note="F#4"></div>

<div class="key" data-note="G4"></div>

<div class="key black" data-note="G#4"></div>

<div class="key" data-note="A4"></div>

<div class="key black" data-note="A#4"></div>

<div class="key" data-note="B4"></div>

</div>

<script>

const audioContext=new (window.AudioContext || window.webkitAudioContext)();

const keys=document.querySelectorAll('.key');

const noteFrequencies={

'C4': 261.63, 'C#4': 277.18, 'D4': 293.66, 'D#4': 311.13,

'E4': 329.63, 'F4': 349.23, 'F#4': 369.99, 'G4': 392.00,

'G#4': 415.30, 'A4': 440.00, 'A#4': 466.16, 'B4': 493.88

};

function playNote(frequency) {

const oscillator=audioContext.createOscillator();

const gainNode=audioContext.createGain();


oscillator.type='sine';

oscillator.frequency.setValueAtTime(frequency, audioContext.currentTime);


gainNode.gain.setValueAtTime(0.5, audioContext.currentTime);

gainNode.gain.exponentialRampToValueAtTime(0.001, audioContext.currentTime + 1);


oscillator.connect(gainNode);

gainNode.connect(audioContext.destination);


oscillator.start();

oscillator.stop(audioContext.currentTime + 1);

}

keys.forEach(key=> {

const note=key.dataset.note;

const frequency=noteFrequencies[note];

key.addEventListener('mousedown', ()=> {

playNote(frequency);

key.classList.add('active');

});

key.addEventListener('mouseup', ()=> {

key.classList.remove('active');

});

key.addEventListener('mouseleave', ()=> {

key.classList.remove('active');

});

});

</script>

</body>

</html>

  • TML标题通过<h1>-<h6>等标签定义。从1-6依次字号变小。
<h1>这是标题</h1>


  • HTML段落通过<p> </p>标签进行定义



  • HTML链接通过<a>标签进行定义,在 href 属性中指定链接的地址。
<h1>这是标题</h1>

点击文字就会跳转到链接页面

  • HTML图像通过<img>标签定义
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ffile02.16sucai.com%2Fd%2Ffile%2F2014%2F0829%2Fb871e1addf5f8e96f3b390ece2b2da0d.jpg&refer=http%3A%2F%2Ffile02.16sucai.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640251661&t=bbcdcc55bdac4a792d3f758462f9fd68" width="104" height="142" />

电子琴在国内广义上一般泛指电子键盘乐器.狭义指初级入门编曲键盘.

在音乐环境里面 键盘(Keyboard)则泛指黑白键盘类乐器,包括传统声学钢琴,风琴,管风琴等.电子键盘,则是应用现代高科技电气化的键盘乐器,包括电钢琴,电子管风琴等.

随着技术进步和用户需求提高及市场竞争等原因,事实上一些键盘厂家并不会严格的按照这些类型定义来制造有严格区分的键盘,所以在定义上来并没有唯一标准。具体某款新产品属于什么类型并不重要,重要的是需要了解它的详细功能参数,是否有你需要的功能。

一般常见常用的电子键盘乐器为以下几种:

1.合成器

主要特点:内置丰富优秀的音色,并且编辑和扩展功能强大.分数字合成器和模拟合成器两大类:数字合成器一般有音序器琶音器.但是没有自动伴奏.模擬合成器一般以电子音色或合成音效为其重点,也分為純模擬合成器和虛擬模擬合成器

常见品牌型号:

数字合成器YAMAHA Motif系列,ROLAND Fantom系列,JUNO系列,KORG TR,TRITON,Kronos系列. KURZWEIL PC系列.moog,Dave Smith.

虚拟模拟合成器NORD LEAD和G全系列,KORG MICROKORG全系列,ROLAND SH全系列,纯模拟合成器MOOG全系列,KORG MS20系列

2.编曲键盘.

主要特点:内置优秀丰富的节奏风格.并且编辑和扩展功能强大.一般没有音色编辑扩展功能或比较简易.

常见品牌型号:YAMAHA PSR四位数字, PSR S系列,TYROS系列 ; KORG PA系列 ; ROLAND BK,G,GW系列,E系列.

3.电钢琴(数码钢琴)

主要特点:一般为88键标准尺寸仿钢琴手感的逐级配重键盘.钢琴和电钢琴EP音色非常优秀.一般没有编辑扩展功能. 舞台电钢一般有比较专业的音色效果调节功能。

部分含有类似编曲键盘的自动节奏功能.如YAMAHA DGX,KBP,CVP系列~ CASIO 飘韵PX 3系

常见品牌型号: YAMAHA P,CP,YDP,CLP,CVP系列; CASIO PX系列,CDP系列; ROLAND RD系列; KORG SP,LP系列; KURZWEIL MARK系列还有顶级品牌NORD PIANO系列.

4.电子琴

主要特点:基础入门编曲键盘,有自动伴奏.一般没有或只有简单的节奏和音色的扩展功能.部分型号有简易合成器功能(如YAMAHA PSR E413)

常见品牌型号: YAMAHA PSR(三位数),KB,PSR E系列; CASIO CTK,WK系列; ROLAND E09.

5.MIDI键盘

其实它的应用原理和我们普通用的电脑打字键盘一模一样.都只是输入终端.也就是说必须借助电脑软件加载软音源.或者连接控制硬音源. 当然前面说的四种电子键盘也可以设定担当MIDI键盘的角色.

6.双排键与电风琴以后再介绍

常见疑问:

1.为什么要把键盘型号按功能分得如此之细,做一个88键带配重带自动伴奏带优秀音色的全功能键盘不就得了?

首先这个全功能键盘的价格也是很强大的~我只听音乐,是不会去买要比MP3贵一倍虽然可以播放视频但是我不需要这个功能的MP4的~

从移动便携上来说,88键键盘的移动是个大问题,一般小车后座都不好摆放,更别说尾箱.61键或76键的键盘才便携,如YAMA NP30是76键电钢~多数合成器也有76键(73)版本.

从功能应用上来说,从事后期制作或者乐队用户来说只要好音色就好了.不需要那些傻瓜式的自动节奏.所以就只需要合成器就OK.反之亦然.

2.为啥一些键盘比如合成器,舞台电钢等都不自带喇叭

自带喇叭不会太好.功率也小.无法高保真表现优秀音色.只是方便娱乐和家用,达不到专业程度.合成器专门用于演出和制作,有专门的扩音和监听系统

喇叭可能存在对电路的干扰,另外集成喇叭增加了键盘的制造成本和重量.(一对专业监听箱子价格相当于半架高级合成器了),

喇叭也占用了琴面板版面资源.使面板上的控制按扭旋纽及显示屏更小排列更拥挤.不方便查看和操作.

3.既然电子键盘都能当MIDI键盘用.谁还单独去买MIDI键盘呢?

专业的MIDI带有多个可编辑MIDI控制器,包括推子、旋钮和按钮.力度感应键盘.触后感应键盘.这些不是一般键盘具备的.更详细更专业的类型区别请参考如下连接:

http://www.cnkeyboard.com/bbs/thread-75617-1-1.html

4.家用 与 专业(舞台) 键盘有哪些不同?

最主要的判断是看输出接口,一般专业舞台键盘必须配备一组可接驳调音台的(左右两个声道)输出接口, 越高级输出接口越多越注重输出效果(如YAMAHA CP1总共有两组输出,一组平衡一组非平衡) ,而家用型号则输出接口与耳机接口共用一个接口。