How to use the howler.Howl function in howler

this.onLoadCallback()
      this.loaded = true
    }
  },

  // Autios
  op: new howler.Howl({
    urls: ['./audios/op.mp3'],
    loop: true,
    onload: () => {
      audio.loads++
      audio.onload()
    }
  }),

  bgm: new howler.Howl({
    urls: ['./audios/bgm.mp3'],
    loop: true,
    onload: () => {
      audio.loads++
      audio.onload()
    }
  }),

  effects: new howler.Howl({
    urls: ['./audios/effects.mp3'],
    sprite: {
      // HUD
      hover: [0, 2000],
      click: [3000, 2000],
      // Status
      over: [64000, 4000],

/* globals io */

import { Howl } from 'howler'
import screenfull from 'screenfull'

var startupSound = new Howl({ urls: ['assets/sounds/startup.wav'] })

var inputStartSound = new Howl({
  urls: ['assets/sounds/inputStart.wav'],
  volume: 0.1
})

var inputEndSound = new Howl({
  urls: ['assets/sounds/inputEnd.wav'],
  volume: 0.02
})

var socket = null
var rootDOM = document.getElementsByTagName('html')[0]

function preventer (e) { e.preventDefault() }
window.addEventListener('touchstart', preventer)

assignSounds() {
    const allDrums = [];
    for(let i = 0; i < this.sounds.length; i++) {
      let sound = new Howl({
        src: [this.sounds[i]],
        volume: 0.79,
        sprite: {go:[50,2000,false]}
      });
      allDrums.push(sound);
    }
    return allDrums;
  }
}

playSound = () => {
    const { sound } = this.state
    const { selectedOutput, outputs } = this.props
    const sinkId = getDeviceIdForOutput(outputs, selectedOutput)
    if (sound) {
      let howl = new Howl({
        src: [sound.path],
        html5: true,
        volume: parseFloat(sound.volume) * 0.01
      })
      if (sinkId) howl._sounds[0]._node.setSinkId(sinkId)
      howl.once('end', () => {
        howl.unload()
        this.setState({ ...this.state, isPlaying: false, howl: null })
      })
      howl.once('load', () => {
        this.setState({ ...this.state, isPlaying: true, howl: howl }, () => {
          this.state.howl.play()
        })
      })
    }
  }

export const piano = (piano) => {
  const notes = {
    '1C': new Howl({ src: ['medias/261-C.mp3'] }),
    '1Cs': new Howl({ src: ['medias/277-C-sharp.mp3'] }),
    '1D': new Howl({ src: ['medias/293-D.mp3'] }),
    '1Ds': new Howl({ src: ['medias/311-D-sharp.mp3'] }),
    '1E': new Howl({ src: ['medias/329-E.mp3'] }),
    '1F': new Howl({ src: ['medias/349-F.mp3'] }),
    '1Fs': new Howl({ src: ['medias/369F-sharp.mp3'] }),
    '1G': new Howl({ src: ['medias/391-G.mp3'] }),
    '1Gs': new Howl({ src: ['medias/415-G-sharp.mp3'] }),
    '2A': new Howl({ src: ['medias/440-A.mp3'] }),
    '2As': new Howl({ src: ['medias/466-A-sharp.mp3'] }),
    '2B': new Howl({ src: ['medias/495-B.mp3'] }),
    '2C': new Howl({ src: ['medias/523-C.mp3'] }),
    '2Cs': new Howl({ src: ['medias/545-C-sharp.mp3'] }),
    '2D': new Howl({ src: ['medias/587-D.mp3'] }),
    '2Ds': new Howl({ src: ['medias/622-D-sharp.mp3'] }),
    '2E': new Howl({ src: ['medias/659-E.mp3'] }),
    '2F': new Howl({ src: ['medias/698-F.mp3'] }),
    '2Fs': new Howl({ src: ['medias/698-F-sharp.mp3'] }),
    '2G': new Howl({ src: ['medias/783-G.mp3'] }),
    '2Gs': new Howl({ src: ['medias/830-G-sharp.mp3'] }),
    '3A': new Howl({ src: ['medias/880-A.mp3'] }),
    '3As': new Howl({ src: ['medias/932-A-sharp.mp3'] }),
    '3B': new Howl({ src: ['medias/987-B.mp3'] })
  };

  addKeyboardEvents(notes);

export const piano = (piano) => {
  const notes = {
    '1C': new Howl({ src: ['medias/261-C.mp3'] }),
    '1Cs': new Howl({ src: ['medias/277-C-sharp.mp3'] }),
    '1D': new Howl({ src: ['medias/293-D.mp3'] }),
    '1Ds': new Howl({ src: ['medias/311-D-sharp.mp3'] }),
    '1E': new Howl({ src: ['medias/329-E.mp3'] }),
    '1F': new Howl({ src: ['medias/349-F.mp3'] }),
    '1Fs': new Howl({ src: ['medias/369F-sharp.mp3'] }),
    '1G': new Howl({ src: ['medias/391-G.mp3'] }),
    '1Gs': new Howl({ src: ['medias/415-G-sharp.mp3'] }),
    '2A': new Howl({ src: ['medias/440-A.mp3'] }),
    '2As': new Howl({ src: ['medias/466-A-sharp.mp3'] }),
    '2B': new Howl({ src: ['medias/495-B.mp3'] }),
    '2C': new Howl({ src: ['medias/523-C.mp3'] }),
    '2Cs': new Howl({ src: ['medias/545-C-sharp.mp3'] }),
    '2D': new Howl({ src: ['medias/587-D.mp3'] }),
    '2Ds': new Howl({ src: ['medias/622-D-sharp.mp3'] }),
    '2E': new Howl({ src: ['medias/659-E.mp3'] }),
    '2F': new Howl({ src: ['medias/698-F.mp3'] }),
    '2Fs': new Howl({ src: ['medias/698-F-sharp.mp3'] }),
    '2G': new Howl({ src: ['medias/783-G.mp3'] }),
    '2Gs': new Howl({ src: ['medias/830-G-sharp.mp3'] }),
    '3A': new Howl({ src: ['medias/880-A.mp3'] }),

src: ['samples/lead-synths/1/1-C2.wav']
});

const Bb = new Howl({
  src: ['samples/lead-synths/1/1-Bb.wav']
});

const Ab = new Howl({
  src: ['samples/lead-synths/1/1-Ab.wav']
});

const G  = new Howl({
  src: ['samples/lead-synths/1/1-G.wav']
});

const F  = new Howl({
  src: ['samples/lead-synths/1/1-F.wav']
});

const Eb = new Howl({
  src: ['samples/lead-synths/1/1-Eb.wav']
});

const D  = new Howl({
  src: ['samples/lead-synths/1/1-D.wav']
});

const C  = new Howl({
  src: ['samples/lead-synths/1/1-C.wav']
});

export default {

constructor(props) {
    super(props);
    this.state = {
      progress: 0,
      playing: false,
      loading: true,
      iconPoints: getPlayIconPoints(props)
    };

    this.howler = new Howl({
      src:    [ this.props.url ],
      format: 'mp3',
      onend:  this.props.stop
    });

    this.updateProgress = this.updateProgress.bind(this);
  }

import { Howl } from 'howler';

const C2 = new Howl({
  src: ['samples/lead-synths/2/2-C2.wav']
});

const Bb = new Howl({
  src: ['samples/lead-synths/2/2-Bb.wav']
});

const Ab = new Howl({
  src: ['samples/lead-synths/2/2-Ab.wav']
});

const G  = new Howl({
  src: ['samples/lead-synths/2/2-G.wav']
});

const F  = new Howl({