發(fā)布一個(gè)網(wǎng)頁鋼琴源碼

線查看網(wǎng)頁鋼琴

效果圖

<!DOCTYPE html>

<head>

<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>

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標(biāo)題通過<h1>-<h6>等標(biāo)簽定義。從1-6依次字號變小。

<h1>這是標(biāo)題</h1>

HTML段落通過<p> </p>標(biāo)簽進(jìn)行定義

HTML鏈接通過<a>標(biāo)簽進(jìn)行定義，在 href 屬性中指定鏈接的地址。

<h1>這是標(biāo)題</h1>

點(diǎn)擊文字就會(huì)跳轉(zhuǎn)到鏈接頁面

HTML圖像通過<img>標(biāo)簽定義

<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" />

電子琴在國內(nèi)廣義上一般泛指電子鍵盤樂器.狹義指初級入門編曲鍵盤.

在音樂環(huán)境里面鍵盤(Keyboard)則泛指黑白鍵盤類樂器,包括傳統(tǒng)聲學(xué)鋼琴,風(fēng)琴,管風(fēng)琴等.電子鍵盤,則是應(yīng)用現(xiàn)代高科技電氣化的鍵盤樂器,包括電鋼琴,電子管風(fēng)琴等.

隨著技術(shù)進(jìn)步和用戶需求提高及市場競爭等原因，事實(shí)上一些鍵盤廠家并不會(huì)嚴(yán)格的按照這些類型定義來制造有嚴(yán)格區(qū)分的鍵盤，所以在定義上來并沒有唯一標(biāo)準(zhǔn)。具體某款新產(chǎn)品屬于什么類型并不重要，重要的是需要了解它的詳細(xì)功能參數(shù)，是否有你需要的功能。

一般常見常用的電子鍵盤樂器為以下幾種：

1.合成器

主要特點(diǎn):內(nèi)置豐富優(yōu)秀的音色,并且編輯和擴(kuò)展功能強(qiáng)大.分?jǐn)?shù)字合成器和模擬合成器兩大類：數(shù)字合成器一般有音序器琶音器.但是沒有自動(dòng)伴奏.模擬合成器一般以電子音色或合成音效為其重點(diǎn),也分為純模擬合成器和虛擬模擬合成器

常見品牌型號:

數(shù)字合成器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.編曲鍵盤.

主要特點(diǎn):內(nèi)置優(yōu)秀豐富的節(jié)奏風(fēng)格.并且編輯和擴(kuò)展功能強(qiáng)大.一般沒有音色編輯擴(kuò)展功能或比較簡易.

常見品牌型號:YAMAHA PSR四位數(shù)字, PSR S系列,TYROS系列 ; KORG PA系列 ; ROLAND BK,G,GW系列,E系列.

3.電鋼琴(數(shù)碼鋼琴)

主要特點(diǎn):一般為88鍵標(biāo)準(zhǔn)尺寸仿鋼琴手感的逐級配重鍵盤.鋼琴和電鋼琴EP音色非常優(yōu)秀.一般沒有編輯擴(kuò)展功能. 舞臺(tái)電鋼一般有比較專業(yè)的音色效果調(diào)節(jié)功能。

部分含有類似編曲鍵盤的自動(dòng)節(jié)奏功能.如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.電子琴

主要特點(diǎn):基礎(chǔ)入門編曲鍵盤,有自動(dòng)伴奏.一般沒有或只有簡單的節(jié)奏和音色的擴(kuò)展功能.部分型號有簡易合成器功能(如YAMAHA PSR E413)

常見品牌型號: YAMAHA PSR(三位數(shù)),KB,PSR E系列; CASIO CTK,WK系列; ROLAND E09.

5.MIDI鍵盤

其實(shí)它的應(yīng)用原理和我們普通用的電腦打字鍵盤一模一樣.都只是輸入終端.也就是說必須借助電腦軟件加載軟音源.或者連接控制硬音源. 當(dāng)然前面說的四種電子鍵盤也可以設(shè)定擔(dān)當(dāng)MIDI鍵盤的角色.

6.雙排鍵與電風(fēng)琴以后再介紹

常見疑問:

1.為什么要把鍵盤型號按功能分得如此之細(xì)，做一個(gè)88鍵帶配重帶自動(dòng)伴奏帶優(yōu)秀音色的全功能鍵盤不就得了?

首先這個(gè)全功能鍵盤的價(jià)格也是很強(qiáng)大的~我只聽音樂,是不會(huì)去買要比MP3貴一倍雖然可以播放視頻但是我不需要這個(gè)功能的MP4的~

從移動(dòng)便攜上來說,88鍵鍵盤的移動(dòng)是個(gè)大問題,一般小車后座都不好擺放,更別說尾箱.61鍵或76鍵的鍵盤才便攜,如YAMA NP30是76鍵電鋼~多數(shù)合成器也有76鍵(73)版本.

從功能應(yīng)用上來說,從事后期制作或者樂隊(duì)用戶來說只要好音色就好了.不需要那些傻瓜式的自動(dòng)節(jié)奏.所以就只需要合成器就OK.反之亦然.

2.為啥一些鍵盤比如合成器,舞臺(tái)電鋼等都不自帶喇叭

自帶喇叭不會(huì)太好.功率也小.無法高保真表現(xiàn)優(yōu)秀音色.只是方便娛樂和家用，達(dá)不到專業(yè)程度.合成器專門用于演出和制作，有專門的擴(kuò)音和監(jiān)聽系統(tǒng)

喇叭可能存在對電路的干擾,另外集成喇叭增加了鍵盤的制造成本和重量.(一對專業(yè)監(jiān)聽箱子價(jià)格相當(dāng)于半架高級合成器了),

喇叭也占用了琴面板版面資源.使面板上的控制按扭旋紐及顯示屏更小排列更擁擠.不方便查看和操作.

3.既然電子鍵盤都能當(dāng)MIDI鍵盤用.誰還單獨(dú)去買MIDI鍵盤呢?

專業(yè)的MIDI帶有多個(gè)可編輯MIDI控制器，包括推子、旋鈕和按鈕.力度感應(yīng)鍵盤.觸后感應(yīng)鍵盤.這些不是一般鍵盤具備的.更詳細(xì)更專業(yè)的類型區(qū)別請參考如下連接:

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

4.家用與專業(yè)(舞臺(tái)) 鍵盤有哪些不同?

最主要的判斷是看輸出接口,一般專業(yè)舞臺(tái)鍵盤必須配備一組可接駁調(diào)音臺(tái)的(左右兩個(gè)聲道)輸出接口, 越高級輸出接口越多越注重輸出效果(如YAMAHA CP1總共有兩組輸出,一組平衡一組非平衡) ，而家用型號則輸出接口與耳機(jī)接口共用一個(gè)接口。

在線咨詢

上一篇：鄭在抗疫｜曝光！金水區(qū)一KTV“頂風(fēng)作案”違規(guī)營業(yè)
下一篇：Qt Widgets、QML、Qt Quick 的區(qū)

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

發(fā)布一個(gè)網(wǎng)頁鋼琴源碼

您的項(xiàng)目需求