Tonejs / Tone.js

A Web Audio framework for making interactive music in the browser.
https://tonejs.github.io
MIT License
13.39k stars 976 forks source link

I found a big trouble, most of the above features I have implemented, but the memory is too large, is there a way to use <audio>it while supporting multi-track playback and pitch change? #1084

Closed liJie-wk closed 2 years ago

liJie-wk commented 2 years ago

Hello author I want to make it happen

  1. Multi-track playback/ Multiple mp3s play at the same time
  2. Supports pitch shifting, such as overall up half tone or overall lower half tone

The first point I did is made in the following way.

`let isAllPlay = false, isMusicLoad = false, players = [ { "name": "a", "player": "", "mute": false, "url": "./1.mp3" // 01:30 Vocals }, { "name": "b", "player": "", "mute": false, "url": "./2.mp3" // 01:30 accompaniment }]; init() { const pitchShift = new Tone.PitchShift(0).toDestination();

      players.forEach(currentItem => {
        const player = new Tone.Player({
          url: currentItem.url
        }).connect(pitchShift).sync().start(0);
        currentItem.player = player
      });

      Tone.loaded().then(() => {
        isMusicLoad = true
      })
    },
    pauseOrPlay() {
      if (isMusicLoad) {
        isAllPlay = !isAllPlay
        if (isAllPlay) {
          if (Tone.context.state !== 'running') Tone.context.resume();
          Tone.Transport.start()
        } else {
          Tone.Transport.pause()
        }
      } else {
        console.log('还没加载');
      }
    },`

I want to skip to the timescale 0 after the end of playback, and it is a paused state or a playback state, which is equivalent to replay, how can I achieve this?

The second point I don't understand which API can be implemented

liJie-wk commented 2 years ago

The second point I solved through GrainPlayer detune

liJie-wk commented 2 years ago

I found a big trouble, most of the above features I have implemented, but the memory is too large, is there a way to use

tambien commented 2 years ago

You can use the

liJie-wk commented 2 years ago

You can use the tag through the MediaElementSourceNode. Connect your audio element through that and then you can pipe it through Tone.js effects like PitchShift or FrequencyShifter.

I successfully used MediaElementSourceNode and PitchShift, but PitchShift will have noise, I want the same effect as GrainPlayer detune, please how to do it

Code-Lonely commented 2 years ago

You can use the tag through the MediaElementSourceNode. Connect your audio element through that and then you can pipe it through Tone.js effects like PitchShift or FrequencyShifter.

I also encountered this problem. Using grainplayer can perfectly achieve the effect of tone change, but when the audio file is relatively large, it consumes a lot of memory. Although using mediaelementsourcenode and pitchshift can solve the memory problem, changing the value of pitch will produce noise. What should I do

marcelblum commented 2 years ago

The <audio> media element supports this natively via playbackRate see https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/playbackRate

Code-Lonely commented 2 years ago

The <audio> media element supports this natively via playbackRate see https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/playbackRate

In this way, changing the pitch will change the playback speed of the audio at the same time. This is not what I want. What I want is that I can choose to modify the tone or speed at will

marcelblum commented 2 years ago

@Code-Lonely did you see https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/preservesPitch