CSS弦樂控制器是一種基于CSS的交互式音樂工具，通常用于在網頁上創建動態音樂效果。它可用于控制不同聲音的播放、音符的長度和音高。以下是一個示例代碼，演示如何使用CSS弦樂控制器在網頁上制作音樂：

/*定義音符*/
@keyframes note {
0% {
height: 0;
}
100% {
height: 50px;
}
}
/*定義音符長度*/
@keyframes note-length {
0% {
width: 0;
}
100% {
width: 250px;
}
}
/*定義音調*/
@keyframes note-pitch {
0% {
transform: translate(0);
}
100% {
transform: translate(0,-100px);
}
}
/*創建弦樂控制器*/
.instrument {
position: absolute;
top: 50%;
left: 50%;
height: 100px;
width: 250px;
transform: translate(-50%, -50%);
overflow: hidden;
background: #c03;
border-radius: 10px;
}
.string {
position: absolute;
height: 0;
width: 250px;
border-radius: 10px;
filter: blur(2px);
transform: translate(0, -100px);
animation: note 1s ease-out infinite alternate;
}
.string:nth-child(2) {
animation-delay: 0.1s;
}
.string:nth-child(3) {
animation-delay: 0.2s;
}
.string:nth-child(4) {
animation-delay: 0.3s;
}
.string:nth-child(5) {
animation-delay: 0.4s;
}
/*使用控制器*/
.instrument:hover .string {
animation: note-length 1s ease-out infinite alternate, note-pitch 0.2s linear infinite alternate;
animation-play-state: running;
}

以上代碼定義了一個CSS弦樂控制器，它包括一組漂浮的弦，當鼠標指向控制器時，每根弦都會生成一段不同音高的音符，弦長也會改變所以音符的長度也會隨之改變。這樣就可以在網頁上播放演奏中國古典音樂或現代流行音樂。