L oop Path and Sampler in Tone. js - PullRequest
Новая
       49

L oop Path and Sampler in Tone. js

0 голосов
/ 29 января 2020

Я пытаюсь создать простой метроном с тоном. js в моем приложении React. Но я не могу услышать ни звука. Что я делаю не так?

Exercise.ts 

import React, { useRef, useEffect, useState } from 'react'
import { exercises } from 'data/exercises.json'
import { Typography, Grid, Button } from '@material-ui/core'
import { useParams } from 'react-router-dom'
import { Sampler, Loop, Part, Transport } from 'tone'

let part: Part
let loop: Loop

export default function ExercisePage() {
  const [isLoaded, setIsLoaded] = useState(false)

  // find exercise
  let { id } = useParams()
  let exercise = exercises.find(e => e.id === id)

  const sampler = useRef<Sampler | null>(null)

  useEffect(() => {
    sampler.current = new Sampler(
      { A1: 'click_hi.ogg', B1: 'click_lo.ogg' },
      () => {
        setIsLoaded(true)
      },
      `${process.env.PUBLIC_URL}/audio/`
    ).toMaster()

    part = new Part(
      (time, note) => {
        // @ts-ignore
        sampler.current.triggerAttack(note.note, note.time, time, note.velocity)
      },
      [
        { time: '4n', note: 'A1', velocity: 1 },
        { time: '4n', note: 'B1', velocity: 0.5 },
        { time: '4n', note: 'B1', velocity: 0.5 },
        { time: '4n', note: 'B1', velocity: 0.5 },
      ]
    )

    loop = new Loop(() => {
      part.start(0)
    }, '1m')

    Transport.start()
  }, [])

  const startLoop = () => {
    loop.start(0)
  }

  return (
    <Grid container direction="column">
      <Grid item>
        <Typography variant="h4">Exercise: {id}</Typography>
        <Button
          variant="contained"
          color="secondary"
          onClick={() => startLoop()}
        >
          Start
        </Button>
      </Grid>
    </Grid>
  )
}

1 Ответ

0 голосов
/ 07 апреля 2020

Переместить Transport.start () в startL oop функция 

const startLoop = () => {
    Transport.start()
    loop.start(0)
}
...