Piano

カスタマイズできるピアノのコンポーネント。

Source Style

React

Loading...

• index.tsx
• Piano.module.css

function App() {
  const synthRef = useRef<Tone.PolySynth | null>(null)

  useEffect(() => {
    const synth = new Tone.PolySynth({ volume: -6 }).toDestination()
    synthRef.current = synth

    return () => {
      synth.releaseAll()
      synth.dispose()
      if (synthRef.current === synth) synthRef.current = null
    }
  }, [])

  return (
    <div
      style={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <Piano.Root
        className={pianoTheme.root}
        classes={{
          keyLabelWrapper: pianoTheme.keyLabelWrapper,
          keyLabel: pianoTheme.keyLabel,
        }}
        keyProps={(_note, { keyType }) => ({
          className:
            keyType === 'white' ? pianoTheme.whiteKey : pianoTheme.blackKey,
        })}
        noteRange={{ first: noteNumber('C3'), last: noteNumber('B4') }}
        keyboardShortcuts={SHORTCUTS.HOME_ROW}
        onPlayNote={(noteNumber) => {
          synthRef.current?.triggerAttack(noteName(noteNumber))
        }}
        onStopNote={(noteNumber) => {
          synthRef.current?.triggerRelease(noteName(noteNumber))
        }}
        label={(_, { index }) => SHORTCUTS.HOME_ROW.keys[index]?.toUpperCase()}
      />
    </div>
  )
}

Svelte

App.svelte

<script lang="ts">
  import { SHORTCUTS } from '@tremolo-ui/dom'
  import { noteName, noteNumber } from '@tremolo-ui/functions'
  import { Piano } from '@tremolo-ui/svelte'
  import * as Tone from 'tone'

  // Copy this file from the Styling page into your own project.
  import pianoTheme from './Piano.module.css'

  let synth: Tone.PolySynth | null = null

  $effect(() => {
    const current = new Tone.PolySynth({ volume: -6 }).toDestination()
    synth = current
    return () => {
      current.releaseAll()
      current.dispose()
      synth = null
    }
  })
</script>

<Piano.Root
  class={pianoTheme.root}
  classes={{
    keyLabelWrapper: pianoTheme.keyLabelWrapper,
    keyLabel: pianoTheme.keyLabel,
  }}
  keyProps={(_note, { keyType }) => ({
    class: keyType === 'white' ? pianoTheme.whiteKey : pianoTheme.blackKey,
  })}
  noteRange={{ first: noteNumber('C3'), last: noteNumber('B4') }}
  keyboardShortcuts={SHORTCUTS.HOME_ROW}
  onPlayNote={(note) => synth?.triggerAttack(noteName(note))}
  onStopNote={(note) => synth?.triggerRelease(noteName(note))}
>
  {#snippet label(_note, { index })}
    {SHORTCUTS.HOME_ROW.keys[index]?.toUpperCase()}
  {/snippet}
</Piano.Root>

Vue

App.vue

<script setup lang="ts">
import * as Tone from 'tone'
import { onBeforeUnmount, onMounted } from 'vue'

import { SHORTCUTS } from '@tremolo-ui/dom'
import { noteName, noteNumber } from '@tremolo-ui/functions'
import { Piano } from '@tremolo-ui/vue'

// Copy this file from the Styling page into your own project.
import pianoTheme from './Piano.module.css'

// Created once mounted: during server rendering there is no Web Audio.
let synth: Tone.PolySynth | null = null
onMounted(() => {
  synth = new Tone.PolySynth({ volume: -6 }).toDestination()
})
onBeforeUnmount(() => {
  synth?.releaseAll()
  synth?.dispose()
  synth = null
})

const play = (note: number) => synth?.triggerAttack(noteName(note))
const stop = (note: number) => synth?.triggerRelease(noteName(note))
</script>

<template>
  <Piano
    :class="pianoTheme.root"
    :classes="{
      keyLabelWrapper: pianoTheme.keyLabelWrapper,
      keyLabel: pianoTheme.keyLabel,
    }"
    :key-props="
      (_note, { keyType }) => ({
        class: keyType === 'white' ? pianoTheme.whiteKey : pianoTheme.blackKey,
      })
    "
    :note-range="{ first: noteNumber('C3'), last: noteNumber('B4') }"
    :keyboard-shortcuts="SHORTCUTS.HOME_ROW"
    @play-note="play"
    @stop-note="stop"
  >
    <template #label="{ state }">
      {{ SHORTCUTS.HOME_ROW.keys[state.index]?.toUpperCase() }}
    </template>
  </Piano>
</template>

インポート

React

import { SHORTCUTS } from '@tremolo-ui/dom'
import { noteNumber, noteName } from '@tremolo-ui/functions'
import { Piano } from '@tremolo-ui/react'

Svelte

import { SHORTCUTS } from '@tremolo-ui/dom'
import { noteNumber, noteName } from '@tremolo-ui/functions'
import { Piano } from '@tremolo-ui/svelte'

Vue

import { SHORTCUTS } from '@tremolo-ui/dom'
import { noteNumber, noteName } from '@tremolo-ui/functions'
import { Piano } from '@tremolo-ui/vue'

API リファレンス

Piano.Root は、下の props に加えて、描画する要素の属性（className や style など）も受け取ります。

Svelte / Vue でも props は同じで、書き方だけがそれぞれの流儀になります（className ではなく class、bind:value や v-model、中身は snippet やスロットなど）。Svelte と Vue を参照してください。

状態は data 属性として要素に乗っているので、セレクタ 1 つで届きます（スタイリングを参照）。属性はその状態が on の間だけ付きます。

Root

noteRange のノートごとに鍵盤を描きます。他のパートは無く、鍵盤は label と keyProps でカスタマイズします。

Prop	型	既定値
classes	{ keyLabelWrapper?: string; keyLabel?: string }	—
noteRange*	NoteRange	—
glissando	boolean	true
midiMax	number	127
keyboardShortcuts	KeyboardShortcuts	—
keyboardShortcutsScope	KeyboardShortcutsScope	'root'
resizable	boolean	false
whiteKeyWidth	number	40
keyGap	number	1
blackKeyWidthRatio	number	0.65
blackKeyHeightRatio	number	0.6
label	(note: number, state: KeyState) => ReactNode	—
keyProps	(note: number, state: KeyState) => KeyAttributes	—
onPlayNote	(note: number, velocity?: number) => void	—
onStopNote	(note: number) => void	—
actionsRef	Ref<PianoMethods>	—

すべての説明: PianoProps

鍵盤の高さと各キーの色は CSS で指定します。キーごとにクラス、スタイル、 data-* 属性を付けるには keyProps を使います。

Data 属性	値
[data-resizable]	resizable のときに付きます

鍵盤

各鍵盤が持つ属性です。

Data 属性	値
[data-note]	"0" … "127"
[data-note-key]	"C" | "C#" | … | "B"
[data-active]	ノートが鳴っている間に付きます
[data-disabled]	ノートが midiMax より高いときに付きます

鍵盤には keyProps から属性を足せるので、自分で決めた状態も属性 1 つで表せます:

keyProps={(note) => ({ 'data-in-scale': inScale(note, 0, 'major') ? '' : undefined })}