From f0e208182766bf56da0396b91e2e3ec46d0ef46a Mon Sep 17 00:00:00 2001 From: saxjax Date: Thu, 23 Mar 2023 16:10:48 +0100 Subject: [PATCH 01/11] trying to use the adapter pattern to allow easy switch between soundlibraries --- package.json | 1 + .../Adapter_SoundFont_to_SoundMaker.js | 66 +++++++++ .../Adapters/Adapter_Tonejs_to_SoundMaker.js | 81 +++++++++++ src/Model/Adapters/Adapter_X_to_SoundMaker.js | 45 ++++++ src/Model/SoundMaker.js | 74 +++------- src/WholeApp.js | 7 + src/components/keyboard/Keyboard.js | 1 + src/components/menu/TopMenu.js | 6 +- src/data/SoundFontLibraryNames.js | 132 ++++++++++++++++++ src/data/TonejsSoundNames.js | 2 + src/styles/02_components/contentBody.scss | 2 +- yarn.lock | 43 ++++++ 12 files changed, 405 insertions(+), 55 deletions(-) create mode 100644 src/Model/Adapters/Adapter_SoundFont_to_SoundMaker.js create mode 100644 src/Model/Adapters/Adapter_Tonejs_to_SoundMaker.js create mode 100644 src/Model/Adapters/Adapter_X_to_SoundMaker.js create mode 100644 src/data/SoundFontLibraryNames.js create mode 100644 src/data/TonejsSoundNames.js diff --git a/package.json b/package.json index f5a3bbe0..3ecfb780 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "react-scripts": "5.0.1", "react-tooltip": "^4.2.21", "sass": "^1.54.9", + "soundfont-player": "^0.12.0", "tone": "^14.7.77", "vexflow": "^4.0.3", "web-vitals": "^2.1.0", diff --git a/src/Model/Adapters/Adapter_SoundFont_to_SoundMaker.js b/src/Model/Adapters/Adapter_SoundFont_to_SoundMaker.js new file mode 100644 index 00000000..e63f2daf --- /dev/null +++ b/src/Model/Adapters/Adapter_SoundFont_to_SoundMaker.js @@ -0,0 +1,66 @@ +import SoundFontLibraryNames from "data/SoundFontLibraryNames"; +import Soundfont from "soundfont-player"; +import Adapter_X_to_SoundMaker from "./Adapter_X_to_SoundMaker"; + +//TODO: make some adaptor pattern to implement different sound libraries: Sounds, Choose instrument, StartSound, StopSound +class Adapter_SoundFont_to_SoundMaker extends Adapter_X_to_SoundMaker { + /* + Module handling all making of sounds. + Made as a Component so it updates when a new instrument is made, but never renders. + So far only handles the Piano module from tonejs. + */ + // constructor(props) { + // super(props); + // // this.instrumentSound = props.instrumentSound; + // // this.velocities = props.velocities; + // // this.synth = this.chooseInstrument(); + // } + constructor(props) { + super(props); + this.instrumentSound = props.instrumentSound; + this.velocities = props.velocities; + this.synth = this.chooseInstrument(); + } + Instruments = SoundFontLibraryNames; + + chooseInstrument() { + if (this.Instruments.some((inst) => this.instrumentSound === inst.name)) { + return Soundfont.instrument(new AudioContext(), this.instrumentSound, { + soundfont: "FluidR3_GM", + gain: 2.0, + }); + } else { + return Soundfont.instrument(new AudioContext(), "acoustic_grand_piano", { + soundfont: "FluidR3_GM", + gain: 2.0, + }); + } + } + initInstrument() { + // this.synth; + } + + getState(note) { + return true; + } + + resumeSound(tone) {} + + startSound(note) { + this.synth.then((instrument) => { + instrument.play(note); + }); + } + + stopSound(note) { + this.synth.then((instrument) => { + instrument.stop(note); + }); + } + + render() { + return null; + } +} + +export default Adapter_SoundFont_to_SoundMaker; diff --git a/src/Model/Adapters/Adapter_Tonejs_to_SoundMaker.js b/src/Model/Adapters/Adapter_Tonejs_to_SoundMaker.js new file mode 100644 index 00000000..26888c46 --- /dev/null +++ b/src/Model/Adapters/Adapter_Tonejs_to_SoundMaker.js @@ -0,0 +1,81 @@ +import SoundFontLibraryNames from "data/SoundFontLibraryNames"; +import { Component } from "react"; +import { Piano } from "@tonejs/piano"; +import * as Tone from "tone"; +import TonejsSoundsNames from "data/TonejsSoundNames"; +//TODO: make some adaptor pattern to implement different sound libraries: Sounds, Choose instrument, StartSound, StopSound +class Adapter_Tonejs_to_SoundMaker extends Component { + /* + Module handling all making of sounds. + Made as a Component so it updates when a new instrument is made, but never renders. + So far only handles the Piano module from tonejs. + */ + constructor(props) { + super(props); + this.sound = Tone; + this.instrumentSound = props.instrumentSound; + this.velocities = props.velocities; + //this.volume = options.volume; + this.synth = this.chooseInstrument(); + // this.initInstrument(); + } + + // startSound =(note) =>{}; + // stopSound = (note) =>{}; + Instruments = TonejsSoundsNames; + chooseInstrument() { + var tempSynth = {}; + switch (this.instrumentSound) { + //TODO: Uncomm and implement some piano sound + case "piano": + tempSynth = new Piano({ + velocities: this.velocities, + }).toDestination(); + + tempSynth.load(); + break; + + default: + tempSynth = new Tone.PolySynth(Tone.AMSynth).toDestination(); + break; + } + + return tempSynth; + } + + initInstrument() { + this.synth.load(); + } + + getState() { + return this.sound.context.state; + } + + resumeSound() { + this.sound.context.resume(); + } + + startSound(note) { + if (this.instrumentSound === "piano") { + this.synth.keyDown({ note: note }); + } else { + const now = Tone.now(); + this.synth.triggerAttack(note, now); + } + } + + stopSound(note) { + if (this.instrumentSound === "piano") { + this.synth.keyUp({ note: note }); + } else { + const now = Tone.now(); + this.synth.triggerRelease([note], now); + } + } + + render() { + return null; + } +} + +export default Adapter_Tonejs_to_SoundMaker; diff --git a/src/Model/Adapters/Adapter_X_to_SoundMaker.js b/src/Model/Adapters/Adapter_X_to_SoundMaker.js new file mode 100644 index 00000000..bee6d21a --- /dev/null +++ b/src/Model/Adapters/Adapter_X_to_SoundMaker.js @@ -0,0 +1,45 @@ +import { Component } from "react"; +//TODO: make some adaptor pattern to implement different sound libraries: Sounds, Choose instrument, StartSound, StopSound +class Adapter_X_to_SoundMaker extends Component { + /* + Module handling all making of sounds. + Made as a Component so it updates when a new instrument is made, but never renders. + So far only handles the Piano module from tonejs. + */ + // constructor(props) { + // super(props); + // // this.instrumentSound = props.instrumentSound; + // // this.velocities = props.velocities; + // // this.synth = this.chooseInstrument(); + // } + Instruments = [{ name: "Not Implemented" }]; + + chooseInstrument() { + throw new Error("Not implemented"); + } + initInstrument() { + throw new Error("Not implemented"); + } + + getState(note) { + throw new Error("Not implemented"); + } + + resumeSound(tone) { + throw new Error("Not implemented"); + } + + startSound(note) { + throw new Error("Not implemented"); + } + + stopSound(note) { + throw new Error("Not implemented"); + } + + render() { + return null; + } +} + +export default Adapter_X_to_SoundMaker; diff --git a/src/Model/SoundMaker.js b/src/Model/SoundMaker.js index e67947bf..ed531715 100644 --- a/src/Model/SoundMaker.js +++ b/src/Model/SoundMaker.js @@ -1,78 +1,50 @@ +import SoundFontLibraryNames from "data/SoundFontLibraryNames"; import { Component } from "react"; -import { Piano } from "@tonejs/piano"; -import * as Tone from "tone"; +import Adapter_to_SoundMaker from "./Adapters/Adapter_SoundFont_to_SoundMaker"; +// import Adapter_to_SoundMaker from "./Adapters/Adapter_Tonejs_to_SoundMaker"; +//TODO: make some adaptor pattern to implement different sound libraries: Sounds, Choose instrument, StartSound, StopSound class SoundMaker extends Component { - /* - Module handling all making of sounds. - Made as a Component so it updates when a new instrument is made, but never renders. - So far only handles the Piano module from tonejs. - */ + /* + Module handling all making of sounds. + Made as a Component so it updates when a new instrument is made, but never renders. + So far only handles the Piano module from tonejs. + */ constructor(props) { super(props); - this.sound = Tone; - this.instrumentSound = props.instrumentSound; - this.velocities = props.velocities; - //this.volume = options.volume; - this.synth = this.chooseInstrument(); - // this.initInstrument(); + // this.instrumentSound = props.instrumentSound; + // this.velocities = props.velocities; + // this.synth = this.chooseInstrument(); + this.soundMakerAdapter = new Adapter_to_SoundMaker(props); } - // startSound =(note) =>{}; - // stopSound = (note) =>{}; + Instruments = () => this.soundMakerAdapter.Instruments; chooseInstrument() { - var tempSynth = {}; - switch (this.instrumentSound) { - //TODO: Uncomm and implement some piano sound - case "piano": - tempSynth = new Piano({ - velocities: this.velocities, - }).toDestination(); - - tempSynth.load(); - break; - - default: - tempSynth = new Tone.PolySynth(Tone.AMSynth).toDestination(); - break; - } - - return tempSynth; + this.soundMakerAdapter.chooseInstrument(); } - initInstrument() { - this.synth.load(); + this.soundMakerAdapter.initInstrument(); } - getState() { - return this.sound.context.state; + getState(note) { + return this.soundMakerAdapter.getState(); } - resumeSound() { - this.sound.context.resume(); + resumeSound(tone) { + this.soundMakerAdapter.resumeSound(); } startSound(note) { - if (this.instrumentSound === "piano") { - this.synth.keyDown({ note: note }); - } else { - const now = Tone.now(); - this.synth.triggerAttack(note, now); - } + this.soundMakerAdapter.startSound(); } stopSound(note) { - if (this.instrumentSound === "piano") { - this.synth.keyUp({ note: note }); - } else { - const now = Tone.now(); - this.synth.triggerRelease([note], now); - } + this.soundMakerAdapter.stopSound(); } render() { - return null; + return this.soundMakerAdapter.render(); } } diff --git a/src/WholeApp.js b/src/WholeApp.js index 928f7144..aa9bb592 100644 --- a/src/WholeApp.js +++ b/src/WholeApp.js @@ -26,6 +26,7 @@ class WholeApp extends Component { clef: "treble", baseNote: "C", notation: ["Colors"], + soundNames: [{ name: "Not Loaded" }], instrumentSound: "piano", //"piano" or "AMSynth" pianoOn: true, extendedKeyboard: false, @@ -93,6 +94,10 @@ class WholeApp extends Component { } }; + handleSoundsAreLoaded = (sounds) => { + this.setState({ soundNames: sounds }); + }; + handleChangeSound = (sound) => { this.setState({ instrumentSound: sound }); }; @@ -431,6 +436,7 @@ class WholeApp extends Component { handleChangeActiveVideoTab={this.handleChangeActiveVideoTab} handleChangeSound={this.handleChangeSound} instrumentSound={this.state.instrumentSound} + soundNames={this.state.soundNames} handleChangeTooltip={this.handleChangeTooltip} handleResetVideoUrl={this.handleResetVideoUrl} resetVideoUrl={this.state.resetVideoUrl} @@ -454,6 +460,7 @@ class WholeApp extends Component { baseNote={this.state.baseNote} notation={this.state.notation} instrumentSound={this.state.instrumentSound} + handleSoundsAreLoaded={this.handleSoundsAreLoaded} pianoOn={this.state.pianoOn} extendedKeyboard={this.state.extendedKeyboard} trebleStaffOn={this.state.trebleStaffOn} diff --git a/src/components/keyboard/Keyboard.js b/src/components/keyboard/Keyboard.js index 4ab7197f..ad30b3ee 100644 --- a/src/components/keyboard/Keyboard.js +++ b/src/components/keyboard/Keyboard.js @@ -70,6 +70,7 @@ class Keyboard extends Component { instrumentSound: this.props.instrumentSound, velocities: 5, volume: 4, + handleSoundsAreLoaded: this.props.handleSoundsAreLoaded, }), }; } diff --git a/src/components/menu/TopMenu.js b/src/components/menu/TopMenu.js index bc1d0c5f..c59e9121 100644 --- a/src/components/menu/TopMenu.js +++ b/src/components/menu/TopMenu.js @@ -26,13 +26,13 @@ import NotationImg from "../../assets/img/Notation"; import clefs from "../../data/clefs"; import tooltipText from "../../data/tooltipText"; +import SoundFontLibraryNames from "data/SoundFontLibraryNames"; // import CustomScaleSelector from "./CustomScaleSelector"; -const sounds = [{ name: "piano" }, { name: "AMSynth" }]; - class TopMenu extends Component { constructor(props) { super(props); + this.sounds = props.soundNames; this.state = { titleNotation: "", clefTitle: "", @@ -168,7 +168,7 @@ class TopMenu extends Component {
= 1.43.0 < 2": version "1.52.0" resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70" @@ -7478,6 +7493,16 @@ normalize-url@^6.0.1: resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-6.1.0.tgz#40d0885b535deffe3f3147bec877d05fe4c5668a" integrity sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A== +note-parser@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/note-parser/-/note-parser-1.1.0.tgz#12e9f17e51450ec994f1364a01982c22667b8e6b" + integrity sha512-YTqWQBsRp40EFrEznnkGtmx68gcgOQ8CdoBspqGBA3G1/4mJwIYbDe/vuNpX3oGX2DhP7b1dBgTmj7p3Zr0P1Q== + +note-parser@^2.0.0: + version "2.0.1" + resolved "https://registry.yarnpkg.com/note-parser/-/note-parser-2.0.1.tgz#2438fd57a46894b402b3a2071798660129c8fbc1" + integrity sha512-w9o6Fv46y3NsFxeezTZSmftBtUM/ypme6iZWVrTJvvsD5RN+w0XNDePWtfreNrZFL3jSjBFhadPoXb+pJO4UdA== + npm-run-path@^4.0.1: version "4.0.1" resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-4.0.1.tgz#b7ecd1e5ed53da8e37a55e1c2269e0b97ed748ea" @@ -9070,6 +9095,15 @@ safe-buffer@5.2.1, safe-buffer@>=5.1.0, safe-buffer@^5.1.0, safe-buffer@~5.2.0: resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a" integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg== +sample-player@^0.5.5: + version "0.5.5" + resolved "https://registry.yarnpkg.com/sample-player/-/sample-player-0.5.5.tgz#bc35bea3449c6fa972528f022a9bbc2872195637" + integrity sha512-VQ9pXPJ1m/eTH8QK6OQ8Dn/HSVToNyY9w9vnv+y/yjkJeRm87tJ/gBEm66jItfSLhKe6VG1DfX8+oT+Mg7QUpg== + dependencies: + adsr "^1.0.0" + midimessage "^1.0.5" + note-parser "^1.1.0" + sanitize.css@*: version "13.0.0" resolved "https://registry.yarnpkg.com/sanitize.css/-/sanitize.css-13.0.0.tgz#2675553974b27964c75562ade3bd85d79879f173" @@ -9326,6 +9360,15 @@ sockjs@^0.3.24: uuid "^8.3.2" websocket-driver "^0.7.4" +soundfont-player@^0.12.0: + version "0.12.0" + resolved "https://registry.yarnpkg.com/soundfont-player/-/soundfont-player-0.12.0.tgz#2b26149f28aba471d2285d3df9a2e1e5793ceaf1" + integrity sha512-8BJIsAt7h1PK3thSZDgF6zecgGhYkK74JnZO8WRZi3h34qG6H/DYlnv7cpRvL7Q9C8N6qld4Qwj7nJsX1gYjEA== + dependencies: + audio-loader "^0.5.0" + note-parser "^2.0.0" + sample-player "^0.5.5" + source-list-map@^2.0.0, source-list-map@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34" From dde073f6b680ae420b315c8a8ea493b2d3566162 Mon Sep 17 00:00:00 2001 From: saxjax Date: Thu, 23 Mar 2023 16:21:06 +0100 Subject: [PATCH 02/11] hardcoded soundnames in wholeApp --- src/WholeApp.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/WholeApp.js b/src/WholeApp.js index aa9bb592..c3e49ddc 100644 --- a/src/WholeApp.js +++ b/src/WholeApp.js @@ -7,6 +7,7 @@ import TopMenu from "./components/menu/TopMenu"; import LoadingScreen from "./components/LoadingScreen"; import { notio_tutorial } from "./data/config"; import scales from "./data/scalesObj"; +import SoundFontLibraryNames from "data/SoundFontLibraryNames"; // TODO:to meet the requirements for router-dom v6 useParam hook can not be used in class Components and props.match.params only works in v5: //This is using a wrapper function for wholeApp because wholeApp is a class and not a functional component, REWRITE wholeApp to a const wholeApp =()=>{...} @@ -26,7 +27,7 @@ class WholeApp extends Component { clef: "treble", baseNote: "C", notation: ["Colors"], - soundNames: [{ name: "Not Loaded" }], + soundNames: SoundFontLibraryNames, instrumentSound: "piano", //"piano" or "AMSynth" pianoOn: true, extendedKeyboard: false, @@ -460,7 +461,7 @@ class WholeApp extends Component { baseNote={this.state.baseNote} notation={this.state.notation} instrumentSound={this.state.instrumentSound} - handleSoundsAreLoaded={this.handleSoundsAreLoaded} + // handleSoundsAreLoaded={this.handleSoundsAreLoaded} pianoOn={this.state.pianoOn} extendedKeyboard={this.state.extendedKeyboard} trebleStaffOn={this.state.trebleStaffOn} From 3982d91ee45f6815a2265d726b5fc519ab27abf6 Mon Sep 17 00:00:00 2001 From: saxjax Date: Thu, 20 Apr 2023 21:31:28 +0200 Subject: [PATCH 03/11] sound is selectable, but it does not stop when releasing the key --- src/Model/SoundMaker.js | 10 +- src/data/SoundFontLibraryNames.js | 206 +++++++++++++++--------------- 2 files changed, 108 insertions(+), 108 deletions(-) diff --git a/src/Model/SoundMaker.js b/src/Model/SoundMaker.js index ed531715..cab6df09 100644 --- a/src/Model/SoundMaker.js +++ b/src/Model/SoundMaker.js @@ -18,7 +18,7 @@ class SoundMaker extends Component { this.soundMakerAdapter = new Adapter_to_SoundMaker(props); } - Instruments = () => this.soundMakerAdapter.Instruments; + Instruments = () => SoundFontLibraryNames; //this.soundMakerAdapter.Instruments; chooseInstrument() { this.soundMakerAdapter.chooseInstrument(); @@ -28,19 +28,19 @@ class SoundMaker extends Component { } getState(note) { - return this.soundMakerAdapter.getState(); + return this.soundMakerAdapter.getState(note); } resumeSound(tone) { - this.soundMakerAdapter.resumeSound(); + this.soundMakerAdapter.resumeSound(tone); } startSound(note) { - this.soundMakerAdapter.startSound(); + this.soundMakerAdapter.startSound(note); } stopSound(note) { - this.soundMakerAdapter.stopSound(); + this.soundMakerAdapter.stopSound(note); } render() { diff --git a/src/data/SoundFontLibraryNames.js b/src/data/SoundFontLibraryNames.js index b4e9834e..7a6b7127 100644 --- a/src/data/SoundFontLibraryNames.js +++ b/src/data/SoundFontLibraryNames.js @@ -1,132 +1,132 @@ const SoundFontLibraryNames = [ { name: "acoustic_grand_piano" }, - { name: "bright_acoustic_piano" }, + // { name: "bright_acoustic_piano" }, { name: "electric_grand_piano" }, { name: "honkytonk_piano" }, - { name: "electric_piano_1" }, - { name: "electric_piano_2" }, - { name: "harpsichord" }, + // { name: "electric_piano_1" }, + // { name: "electric_piano_2" }, + // { name: "harpsichord" }, { name: "clavinet" }, - { name: "celesta" }, - { name: "glockenspiel" }, - { name: "music_box" }, + // { name: "celesta" }, + // { name: "glockenspiel" }, + // { name: "music_box" }, { name: "vibraphone" }, - { name: "marimba" }, + // { name: "marimba" }, { name: "xylophone" }, - { name: "tubular_bells" }, - { name: "dulcimer" }, + // { name: "tubular_bells" }, + // { name: "dulcimer" }, { name: "drawbar_organ" }, - { name: "percussive_organ" }, - { name: "rock_organ" }, - { name: "church_organ" }, + // { name: "percussive_organ" }, + // { name: "rock_organ" }, + // { name: "church_organ" }, { name: "reed_organ" }, { name: "accordion" }, - { name: "harmonica" }, - { name: "tango_accordion" }, + // { name: "harmonica" }, + // { name: "tango_accordion" }, { name: "acoustic_guitar_nylon" }, - { name: "acoustic_guitar_steel" }, - { name: "electric_guitar_jazz" }, + // { name: "acoustic_guitar_steel" }, + // { name: "electric_guitar_jazz" }, { name: "electric_guitar_clean" }, - { name: "electric_guitar_muted" }, - { name: "overdriven_guitar" }, - { name: "distortion_guitar" }, - { name: "guitar_harmonics" }, + // { name: "electric_guitar_muted" }, + // { name: "overdriven_guitar" }, + // { name: "distortion_guitar" }, + // { name: "guitar_harmonics" }, { name: "acoustic_bass" }, - { name: "electric_bass_finger" }, - { name: "electric_bass_pick" }, + // { name: "electric_bass_finger" }, + // { name: "electric_bass_pick" }, { name: "fretless_bass" }, - { name: "slap_bass_1" }, - { name: "slap_bass_2" }, - { name: "synth_bass_1" }, - { name: "synth_bass_2" }, + // { name: "slap_bass_1" }, + // { name: "slap_bass_2" }, + // { name: "synth_bass_1" }, + // { name: "synth_bass_2" }, { name: "violin" }, - { name: "viola" }, - { name: "cello" }, - { name: "contrabass" }, - { name: "tremolo_strings" }, - { name: "pizzicato_strings" }, - { name: "orchestral_harp" }, - { name: "timpani" }, + // { name: "viola" }, + // { name: "cello" }, + // { name: "contrabass" }, + // { name: "tremolo_strings" }, + // { name: "pizzicato_strings" }, + // { name: "orchestral_harp" }, + // { name: "timpani" }, { name: "string_ensemble_1" }, - { name: "string_ensemble_2" }, - { name: "synth_strings_1" }, - { name: "synth_strings_2" }, - { name: "choir_aahs" }, - { name: "voice_oohs" }, - { name: "synth_choir" }, - { name: "orchestra_hit" }, + // { name: "string_ensemble_2" }, + // { name: "synth_strings_1" }, + // { name: "synth_strings_2" }, + // { name: "choir_aahs" }, + // { name: "voice_oohs" }, + // { name: "synth_choir" }, + // { name: "orchestra_hit" }, { name: "trumpet" }, - { name: "trombone" }, - { name: "tuba" }, + // { name: "trombone" }, + // { name: "tuba" }, { name: "muted_trumpet" }, - { name: "french_horn" }, - { name: "brass_section" }, - { name: "synth_brass_1" }, - { name: "synth_brass_2" }, - { name: "soprano_sax" }, - { name: "alto_sax" }, + // { name: "french_horn" }, + // { name: "brass_section" }, + // { name: "synth_brass_1" }, + // { name: "synth_brass_2" }, + // { name: "soprano_sax" }, + // { name: "alto_sax" }, { name: "tenor_sax" }, - { name: "baritone_sax" }, - { name: "oboe" }, - { name: "english_horn" }, - { name: "bassoon" }, - { name: "clarinet" }, - { name: "piccolo" }, + // { name: "baritone_sax" }, + // { name: "oboe" }, + // { name: "english_horn" }, + // { name: "bassoon" }, + // { name: "clarinet" }, + // { name: "piccolo" }, { name: "flute" }, - { name: "recorder" }, - { name: "pan_flute" }, - { name: "blown_bottle" }, - { name: "shakuhachi" }, - { name: "whistle" }, - { name: "ocarina" }, + // { name: "recorder" }, + // { name: "pan_flute" }, + // { name: "blown_bottle" }, + // { name: "shakuhachi" }, + // { name: "whistle" }, + // { name: "ocarina" }, { name: "lead_1_square" }, { name: "lead_2_sawtooth" }, - { name: "lead_3_calliope" }, - { name: "lead_4_chiff" }, - { name: "lead_5_charang" }, - { name: "lead_6_voice" }, - { name: "lead_7_fifths" }, + // { name: "lead_3_calliope" }, + // { name: "lead_4_chiff" }, + // { name: "lead_5_charang" }, + // { name: "lead_6_voice" }, + // { name: "lead_7_fifths" }, { name: "lead_8_bass__lead" }, - { name: "pad_1_new_age" }, + // { name: "pad_1_new_age" }, { name: "pad_2_warm" }, - { name: "pad_3_polysynth" }, - { name: "pad_4_choir" }, + // { name: "pad_3_polysynth" }, + // { name: "pad_4_choir" }, { name: "pad_5_bowed" }, - { name: "pad_6_metallic" }, - { name: "pad_7_halo" }, - { name: "pad_8_sweep" }, - { name: "fx_1_rain" }, - { name: "fx_2_soundtrack" }, - { name: "fx_3_crystal" }, - { name: "fx_4_atmosphere" }, - { name: "fx_5_brightness" }, - { name: "fx_6_goblins" }, - { name: "fx_7_echoes" }, - { name: "fx_8_scifi" }, - { name: "sitar" }, - { name: "banjo" }, - { name: "shamisen" }, - { name: "koto" }, - { name: "kalimba" }, - { name: "bagpipe" }, - { name: "fiddle" }, - { name: "shanai" }, - { name: "tinkle_bell" }, - { name: "agogo" }, + // { name: "pad_6_metallic" }, + // { name: "pad_7_halo" }, + // { name: "pad_8_sweep" }, + // { name: "fx_1_rain" }, + // { name: "fx_2_soundtrack" }, + // { name: "fx_3_crystal" }, + // { name: "fx_4_atmosphere" }, + // { name: "fx_5_brightness" }, + // { name: "fx_6_goblins" }, + // { name: "fx_7_echoes" }, + // { name: "fx_8_scifi" }, + // { name: "sitar" }, + // { name: "banjo" }, + // { name: "shamisen" }, + // { name: "koto" }, + // { name: "kalimba" }, + // { name: "bagpipe" }, + // { name: "fiddle" }, + // { name: "shanai" }, + // { name: "tinkle_bell" }, + // { name: "agogo" }, { name: "steel_drums" }, - { name: "woodblock" }, - { name: "taiko_drum" }, - { name: "melodic_tom" }, - { name: "synth_drum" }, - { name: "reverse_cymbal" }, - { name: "guitar_fret_noise" }, - { name: "breath_noise" }, - { name: "seashore" }, - { name: "bird_tweet" }, - { name: "telephone_ring" }, - { name: "helicopter" }, - { name: "applause" }, - { name: "gunshot" }, + // { name: "woodblock" }, + // { name: "taiko_drum" }, + // { name: "melodic_tom" }, + // { name: "synth_drum" }, + // { name: "reverse_cymbal" }, + // { name: "guitar_fret_noise" }, + // { name: "breath_noise" }, + // { name: "seashore" }, + // { name: "bird_tweet" }, + // { name: "telephone_ring" }, + // { name: "helicopter" }, + // { name: "applause" }, + // { name: "gunshot" }, ]; export default SoundFontLibraryNames; From 01fb0d6fa073c3217f92233c2014ed73c552c9d9 Mon Sep 17 00:00:00 2001 From: saxjax Date: Sat, 22 Apr 2023 15:40:55 +0200 Subject: [PATCH 04/11] tones now stop when button is released --- .../Adapter_SoundFont_to_SoundMaker.js | 27 +++++++++++++------ 1 file changed, 19 insertions(+), 8 deletions(-) diff --git a/src/Model/Adapters/Adapter_SoundFont_to_SoundMaker.js b/src/Model/Adapters/Adapter_SoundFont_to_SoundMaker.js index e63f2daf..b7391163 100644 --- a/src/Model/Adapters/Adapter_SoundFont_to_SoundMaker.js +++ b/src/Model/Adapters/Adapter_SoundFont_to_SoundMaker.js @@ -17,20 +17,24 @@ class Adapter_SoundFont_to_SoundMaker extends Adapter_X_to_SoundMaker { // } constructor(props) { super(props); + this.soundfont = Soundfont; this.instrumentSound = props.instrumentSound; this.velocities = props.velocities; + this.ac = new AudioContext(); this.synth = this.chooseInstrument(); + this.playingNotes = {}; + this.releaseNotes = []; } Instruments = SoundFontLibraryNames; chooseInstrument() { - if (this.Instruments.some((inst) => this.instrumentSound === inst.name)) { - return Soundfont.instrument(new AudioContext(), this.instrumentSound, { + if (this.Instruments.some((inst) => inst.name === this.instrumentSound)) { + return Soundfont.instrument(this.ac, this.instrumentSound, { soundfont: "FluidR3_GM", gain: 2.0, }); } else { - return Soundfont.instrument(new AudioContext(), "acoustic_grand_piano", { + return Soundfont.instrument(this.ac, "acoustic_grand_piano", { soundfont: "FluidR3_GM", gain: 2.0, }); @@ -41,21 +45,28 @@ class Adapter_SoundFont_to_SoundMaker extends Adapter_X_to_SoundMaker { } getState(note) { - return true; + return this.ac.state; } resumeSound(tone) {} startSound(note) { + if (this.playingNotes.hasOwnProperty(note)) { + return; + } this.synth.then((instrument) => { - instrument.play(note); + this.playingNotes[note] = instrument.play(note); }); } stopSound(note) { - this.synth.then((instrument) => { - instrument.stop(note); - }); + if (this.playingNotes.hasOwnProperty(note)) { + // this.playingNotes.delete(note) + this.synth.then((instrument) => { + this.playingNotes[note].stop(this.ac.currentTime); + delete this.playingNotes[note]; + }); + } } render() { From 85373f72f67761c244fb2bb80abcd2a00ad0be78 Mon Sep 17 00:00:00 2001 From: saxjax Date: Sat, 22 Apr 2023 15:51:42 +0200 Subject: [PATCH 05/11] tones now stop when button is released, reset css to match master --- src/styles/02_components/contentBody.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/styles/02_components/contentBody.scss b/src/styles/02_components/contentBody.scss index 2439534d..fd033d86 100644 --- a/src/styles/02_components/contentBody.scss +++ b/src/styles/02_components/contentBody.scss @@ -40,8 +40,8 @@ .Key .note { opacity: 0.4; text-align: center; - font-weight: 700; - font-size: 3vmin; + font-weight: bolder; + font-size: 3.2vmin; } .color-key { @@ -56,9 +56,9 @@ align-items: end; .noteWrapper { - opacity: 0.8; - text-shadow: 1px 1px 20px rgb(250, 244, 244), 0 0 2em rgb(230, 230, 237), - 0 0 0.2em rgb(245, 245, 251); + opacity: 1; + // text-shadow: 0px 0px -0px rgb(250, 244, 244), 0 0 0.01em rgb(66, 66, 68), + // 0 0 0.001em rgb(245, 245, 251); grid-area: noteName; // background: yellow; display: grid; From 492f6e4c31164ad8bbc0b9251371ccb36eb7a959 Mon Sep 17 00:00:00 2001 From: Martin Bruun Michaelsen Date: Sat, 22 Apr 2023 22:34:17 +0200 Subject: [PATCH 06/11] Fix tests --- src/Model/Adapters/Adapter_SoundFont_to_SoundMaker.js | 1 + src/__test__/CustomScaleMenu.int.test.js | 9 +++++++-- src/__test__/TopMenu.int.test.js | 7 +++++++ src/__test__/examples.example.test.js | 10 +++++++--- 4 files changed, 22 insertions(+), 5 deletions(-) diff --git a/src/Model/Adapters/Adapter_SoundFont_to_SoundMaker.js b/src/Model/Adapters/Adapter_SoundFont_to_SoundMaker.js index b7391163..8aaf6de1 100644 --- a/src/Model/Adapters/Adapter_SoundFont_to_SoundMaker.js +++ b/src/Model/Adapters/Adapter_SoundFont_to_SoundMaker.js @@ -1,6 +1,7 @@ import SoundFontLibraryNames from "data/SoundFontLibraryNames"; import Soundfont from "soundfont-player"; import Adapter_X_to_SoundMaker from "./Adapter_X_to_SoundMaker"; +import { AudioContext } from "standardized-audio-context"; //TODO: make some adaptor pattern to implement different sound libraries: Sounds, Choose instrument, StartSound, StopSound class Adapter_SoundFont_to_SoundMaker extends Adapter_X_to_SoundMaker { diff --git a/src/__test__/CustomScaleMenu.int.test.js b/src/__test__/CustomScaleMenu.int.test.js index 46fba801..1b61b352 100644 --- a/src/__test__/CustomScaleMenu.int.test.js +++ b/src/__test__/CustomScaleMenu.int.test.js @@ -2,9 +2,14 @@ import * as React from "react"; // Necessary to run the tests, apparently. import { MemoryRouter, Route, Routes } from "react-router-dom"; import { render, screen, waitFor } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; -// import { Piano } from "@tonejs/piano"; import WholeApp from "../WholeApp"; -// import TopMenu from "../components/menu/TopMenu"; +import SoundMaker from "../Model/SoundMaker"; + +jest.mock("../Model/SoundMaker"); // Automatic mock, which can be asserted against + +beforeEach(() => { + SoundMaker.mockClear(); +}); jest.mock("react-dom", () => { return { diff --git a/src/__test__/TopMenu.int.test.js b/src/__test__/TopMenu.int.test.js index 64a93ceb..93f2fa96 100644 --- a/src/__test__/TopMenu.int.test.js +++ b/src/__test__/TopMenu.int.test.js @@ -3,6 +3,13 @@ import { MemoryRouter, Route, Routes } from "react-router-dom"; import { render, screen, waitFor } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import WholeApp from "../WholeApp"; +import SoundMaker from "../Model/SoundMaker"; + +jest.mock("../Model/SoundMaker"); // Automatic mock, which can be asserted against + +beforeEach(() => { + SoundMaker.mockClear(); +}); jest.mock("react-dom", () => { return { diff --git a/src/__test__/examples.example.test.js b/src/__test__/examples.example.test.js index fdb302eb..eb246094 100644 --- a/src/__test__/examples.example.test.js +++ b/src/__test__/examples.example.test.js @@ -2,10 +2,14 @@ import * as React from "react"; // Necessary to run the tests, apparently. import { MemoryRouter, Route, Routes } from "react-router-dom"; import { render, screen, waitFor } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; -// import { Piano } from "@tonejs/piano"; import WholeApp from "../WholeApp"; -// import TopMenu from "../components/menu/TopMenu"; -// import Keyboard from "../components/Keyboard/Keyboard"; +import SoundMaker from "../Model/SoundMaker"; + +jest.mock("../Model/SoundMaker"); // Automatic mock, which can be asserted against + +beforeEach(() => { + SoundMaker.mockClear(); +}); jest.mock("react-dom", () => { return { From db45b6a40769b763da2c47d611c114e52ccf1f08 Mon Sep 17 00:00:00 2001 From: Martin Bruun Michaelsen Date: Sat, 22 Apr 2023 22:52:17 +0200 Subject: [PATCH 07/11] Update names --- src/components/form/ListRadio.js | 2 +- src/data/SoundFontLibraryNames.js | 50 +++++++++++++++---------------- 2 files changed, 26 insertions(+), 26 deletions(-) diff --git a/src/components/form/ListRadio.js b/src/components/form/ListRadio.js index 5f9c9e84..9f90fa52 100644 --- a/src/components/form/ListRadio.js +++ b/src/components/form/ListRadio.js @@ -60,7 +60,7 @@ class ListRadio extends Component { {this.props.data.map((option) => { return Date: Sat, 22 Apr 2023 22:54:19 +0200 Subject: [PATCH 08/11] Remove unnecessary addition --- src/Model/Adapters/Adapter_SoundFont_to_SoundMaker.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Model/Adapters/Adapter_SoundFont_to_SoundMaker.js b/src/Model/Adapters/Adapter_SoundFont_to_SoundMaker.js index 8aaf6de1..b7391163 100644 --- a/src/Model/Adapters/Adapter_SoundFont_to_SoundMaker.js +++ b/src/Model/Adapters/Adapter_SoundFont_to_SoundMaker.js @@ -1,7 +1,6 @@ import SoundFontLibraryNames from "data/SoundFontLibraryNames"; import Soundfont from "soundfont-player"; import Adapter_X_to_SoundMaker from "./Adapter_X_to_SoundMaker"; -import { AudioContext } from "standardized-audio-context"; //TODO: make some adaptor pattern to implement different sound libraries: Sounds, Choose instrument, StartSound, StopSound class Adapter_SoundFont_to_SoundMaker extends Adapter_X_to_SoundMaker { From a80034e615eab5cbd092139b36c1363c6ce76ebe Mon Sep 17 00:00:00 2001 From: saxjax Date: Sun, 23 Apr 2023 00:34:59 +0200 Subject: [PATCH 09/11] soundMaker is setup as adapter pattern, ready to let us implement different synth liraries --- .../Adapter_SoundFont_to_SoundMaker.js | 21 +++++++++++++++-- .../Adapters/Adapter_Tonejs_to_SoundMaker.js | 8 +++---- src/Model/SoundMaker.js | 23 ++++++++++++------- src/WholeApp.js | 5 ++-- 4 files changed, 41 insertions(+), 16 deletions(-) diff --git a/src/Model/Adapters/Adapter_SoundFont_to_SoundMaker.js b/src/Model/Adapters/Adapter_SoundFont_to_SoundMaker.js index b7391163..6c9968f5 100644 --- a/src/Model/Adapters/Adapter_SoundFont_to_SoundMaker.js +++ b/src/Model/Adapters/Adapter_SoundFont_to_SoundMaker.js @@ -3,6 +3,7 @@ import Soundfont from "soundfont-player"; import Adapter_X_to_SoundMaker from "./Adapter_X_to_SoundMaker"; //TODO: make some adaptor pattern to implement different sound libraries: Sounds, Choose instrument, StartSound, StopSound +//TODO: Note that you must change the the list of availlable sounds in wholeApp when changing lib class Adapter_SoundFont_to_SoundMaker extends Adapter_X_to_SoundMaker { /* Module handling all making of sounds. @@ -23,15 +24,31 @@ class Adapter_SoundFont_to_SoundMaker extends Adapter_X_to_SoundMaker { this.ac = new AudioContext(); this.synth = this.chooseInstrument(); this.playingNotes = {}; - this.releaseNotes = []; + // this.releaseNotes = []; } Instruments = SoundFontLibraryNames; chooseInstrument() { if (this.Instruments.some((inst) => inst.name === this.instrumentSound)) { + if (this.synth) { + this.synth.then((instrument) => { + Object.keys(this.playingNotes).forEach((tone) => { + this.playingNotes[tone].stop(this.ac.currentTime); + }); + }); + } return Soundfont.instrument(this.ac, this.instrumentSound, { - soundfont: "FluidR3_GM", + // soundfont: "FluidR3_GM", + soundfont: "MusyngKite", gain: 2.0, + adsr: [0, 0.3, 0.2, 1], + // loop: false, + loop: !( + this.instrumentSound.includes("piano") || + this.instrumentSound.includes("guitar") || + this.instrumentSound.includes("bass") || + this.instrumentSound.includes("clavinet") + ), }); } else { return Soundfont.instrument(this.ac, "acoustic_grand_piano", { diff --git a/src/Model/Adapters/Adapter_Tonejs_to_SoundMaker.js b/src/Model/Adapters/Adapter_Tonejs_to_SoundMaker.js index 26888c46..4b87ba84 100644 --- a/src/Model/Adapters/Adapter_Tonejs_to_SoundMaker.js +++ b/src/Model/Adapters/Adapter_Tonejs_to_SoundMaker.js @@ -1,4 +1,4 @@ -import SoundFontLibraryNames from "data/SoundFontLibraryNames"; +// import SoundFontLibraryNames from "data/SoundFontLibraryNames"; import { Component } from "react"; import { Piano } from "@tonejs/piano"; import * as Tone from "tone"; @@ -24,7 +24,7 @@ class Adapter_Tonejs_to_SoundMaker extends Component { // stopSound = (note) =>{}; Instruments = TonejsSoundsNames; chooseInstrument() { - var tempSynth = {}; + let tempSynth = {}; switch (this.instrumentSound) { //TODO: Uncomm and implement some piano sound case "piano": @@ -47,11 +47,11 @@ class Adapter_Tonejs_to_SoundMaker extends Component { this.synth.load(); } - getState() { + getState(tone) { return this.sound.context.state; } - resumeSound() { + resumeSound(tone) { this.sound.context.resume(); } diff --git a/src/Model/SoundMaker.js b/src/Model/SoundMaker.js index cab6df09..ac65f374 100644 --- a/src/Model/SoundMaker.js +++ b/src/Model/SoundMaker.js @@ -1,8 +1,8 @@ -import SoundFontLibraryNames from "data/SoundFontLibraryNames"; +// import SoundFontLibraryNames from "data/SoundFontLibraryNames"; import { Component } from "react"; -import Adapter_to_SoundMaker from "./Adapters/Adapter_SoundFont_to_SoundMaker"; +import sf_Adapter_to_SoundMaker from "./Adapters/Adapter_SoundFont_to_SoundMaker"; -// import Adapter_to_SoundMaker from "./Adapters/Adapter_Tonejs_to_SoundMaker"; +import ts_Adapter_to_SoundMaker from "./Adapters/Adapter_Tonejs_to_SoundMaker"; //TODO: make some adaptor pattern to implement different sound libraries: Sounds, Choose instrument, StartSound, StopSound class SoundMaker extends Component { /* @@ -15,10 +15,17 @@ class SoundMaker extends Component { // this.instrumentSound = props.instrumentSound; // this.velocities = props.velocities; // this.synth = this.chooseInstrument(); - this.soundMakerAdapter = new Adapter_to_SoundMaker(props); + // this.soundMakerAdapter = new Adapter_to_SoundMaker(props); + this.selectedAdaptor = 1; + this.soundMakerAdapters = [ + new sf_Adapter_to_SoundMaker(props), + new ts_Adapter_to_SoundMaker(props), + ]; + this.soundMakerAdapter = this.soundMakerAdapters[this.selectedAdaptor]; } - Instruments = () => SoundFontLibraryNames; //this.soundMakerAdapter.Instruments; + // Instruments = () => SoundFontLibraryNames; //this.soundMakerAdapter.Instruments; + Instruments = () => this.soundMakerAdapter.Instruments; chooseInstrument() { this.soundMakerAdapter.chooseInstrument(); @@ -28,11 +35,11 @@ class SoundMaker extends Component { } getState(note) { - return this.soundMakerAdapter.getState(note); + return this.soundMakerAdapter.getState(); } - resumeSound(tone) { - this.soundMakerAdapter.resumeSound(tone); + resumeSound(note) { + this.soundMakerAdapter.resumeSound(note); } startSound(note) { diff --git a/src/WholeApp.js b/src/WholeApp.js index c3e49ddc..bdbcefc1 100644 --- a/src/WholeApp.js +++ b/src/WholeApp.js @@ -7,7 +7,8 @@ import TopMenu from "./components/menu/TopMenu"; import LoadingScreen from "./components/LoadingScreen"; import { notio_tutorial } from "./data/config"; import scales from "./data/scalesObj"; -import SoundFontLibraryNames from "data/SoundFontLibraryNames"; +// import SoundLibraryNames from "data/SoundFontLibraryNames"; +import SoundLibraryNames from "data/TonejsSoundNames"; // TODO:to meet the requirements for router-dom v6 useParam hook can not be used in class Components and props.match.params only works in v5: //This is using a wrapper function for wholeApp because wholeApp is a class and not a functional component, REWRITE wholeApp to a const wholeApp =()=>{...} @@ -27,7 +28,7 @@ class WholeApp extends Component { clef: "treble", baseNote: "C", notation: ["Colors"], - soundNames: SoundFontLibraryNames, + soundNames: SoundLibraryNames, instrumentSound: "piano", //"piano" or "AMSynth" pianoOn: true, extendedKeyboard: false, From 4409781878f777faab3e7c080c839b0c1d2a2ff0 Mon Sep 17 00:00:00 2001 From: saxjax Date: Sun, 23 Apr 2023 18:02:22 +0200 Subject: [PATCH 10/11] needs some changes in all functions the uses the radio onChange, it should implement the data_index_name for changing scales, clefs and sounds --- src/Model/SoundMaker.js | 11 +- src/components/menu/TopMenu.js | 4 +- src/data/SoundFontLibraryNames.js | 256 +++++++++++++++--------------- src/data/TonejsSoundNames.js | 5 +- src/data/clefs.js | 31 ++-- src/data/scalesObj.js | 18 +++ src/data/themes.js | 11 +- 7 files changed, 181 insertions(+), 155 deletions(-) diff --git a/src/Model/SoundMaker.js b/src/Model/SoundMaker.js index ac65f374..533d7f13 100644 --- a/src/Model/SoundMaker.js +++ b/src/Model/SoundMaker.js @@ -1,7 +1,6 @@ // import SoundFontLibraryNames from "data/SoundFontLibraryNames"; import { Component } from "react"; import sf_Adapter_to_SoundMaker from "./Adapters/Adapter_SoundFont_to_SoundMaker"; - import ts_Adapter_to_SoundMaker from "./Adapters/Adapter_Tonejs_to_SoundMaker"; //TODO: make some adaptor pattern to implement different sound libraries: Sounds, Choose instrument, StartSound, StopSound class SoundMaker extends Component { @@ -16,11 +15,11 @@ class SoundMaker extends Component { // this.velocities = props.velocities; // this.synth = this.chooseInstrument(); // this.soundMakerAdapter = new Adapter_to_SoundMaker(props); - this.selectedAdaptor = 1; - this.soundMakerAdapters = [ - new sf_Adapter_to_SoundMaker(props), - new ts_Adapter_to_SoundMaker(props), - ]; + this.selectedAdaptor = "tonejs-player"; + this.soundMakerAdapters = { + "soundfont-player": new sf_Adapter_to_SoundMaker(props), + "tonejs-player": new ts_Adapter_to_SoundMaker(props), + }; this.soundMakerAdapter = this.soundMakerAdapters[this.selectedAdaptor]; } diff --git a/src/components/menu/TopMenu.js b/src/components/menu/TopMenu.js index c59e9121..529110d7 100644 --- a/src/components/menu/TopMenu.js +++ b/src/components/menu/TopMenu.js @@ -26,7 +26,7 @@ import NotationImg from "../../assets/img/Notation"; import clefs from "../../data/clefs"; import tooltipText from "../../data/tooltipText"; -import SoundFontLibraryNames from "data/SoundFontLibraryNames"; +// import SoundFontLibraryNames from "data/SoundFontLibraryNames"; // import CustomScaleSelector from "./CustomScaleSelector"; class TopMenu extends Component { @@ -167,7 +167,7 @@ class TopMenu extends Component { content={
Date: Sun, 23 Apr 2023 18:32:10 +0200 Subject: [PATCH 11/11] back to scratch, names are displayed as they appear in the sound index data file, this should be changed --- src/Model/SoundMaker.js | 2 +- src/WholeApp.js | 5 +- src/components/form/ListRadio.js | 28 ++-- src/data/SoundFontLibraryNames.js | 256 +++++++++++++++--------------- src/data/TonejsSoundNames.js | 4 +- 5 files changed, 148 insertions(+), 147 deletions(-) diff --git a/src/Model/SoundMaker.js b/src/Model/SoundMaker.js index 533d7f13..51719d12 100644 --- a/src/Model/SoundMaker.js +++ b/src/Model/SoundMaker.js @@ -15,7 +15,7 @@ class SoundMaker extends Component { // this.velocities = props.velocities; // this.synth = this.chooseInstrument(); // this.soundMakerAdapter = new Adapter_to_SoundMaker(props); - this.selectedAdaptor = "tonejs-player"; + this.selectedAdaptor = "soundfont-player"; this.soundMakerAdapters = { "soundfont-player": new sf_Adapter_to_SoundMaker(props), "tonejs-player": new ts_Adapter_to_SoundMaker(props), diff --git a/src/WholeApp.js b/src/WholeApp.js index bdbcefc1..d3c5e3ad 100644 --- a/src/WholeApp.js +++ b/src/WholeApp.js @@ -7,8 +7,8 @@ import TopMenu from "./components/menu/TopMenu"; import LoadingScreen from "./components/LoadingScreen"; import { notio_tutorial } from "./data/config"; import scales from "./data/scalesObj"; -// import SoundLibraryNames from "data/SoundFontLibraryNames"; -import SoundLibraryNames from "data/TonejsSoundNames"; +import SoundLibraryNames from "data/SoundFontLibraryNames"; +// import SoundLibraryNames from "data/TonejsSoundNames"; // TODO:to meet the requirements for router-dom v6 useParam hook can not be used in class Components and props.match.params only works in v5: //This is using a wrapper function for wholeApp because wholeApp is a class and not a functional component, REWRITE wholeApp to a const wholeApp =()=>{...} @@ -101,6 +101,7 @@ class WholeApp extends Component { }; handleChangeSound = (sound) => { + // const instrumentsound = this.state.soundNames.find(instrument => instrument.label === sound) this.setState({ instrumentSound: sound }); }; diff --git a/src/components/form/ListRadio.js b/src/components/form/ListRadio.js index 9f90fa52..76f58fa3 100644 --- a/src/components/form/ListRadio.js +++ b/src/components/form/ListRadio.js @@ -25,11 +25,9 @@ class ListRadio extends Component { this.props.setTitle(this.props.initOption); if (this.props.displayPicto) this.props.setImage(this.props.initOption); } - } onChange = (changeEvent) => { - const { value } = changeEvent.target; this.setState( (prevState) => ({ @@ -56,18 +54,20 @@ class ListRadio extends Component { render() { return ( - <> - {this.props.data.map((option) => { - return - })} - - ) + <> + {this.props.data.map((option) => { + return ( + + ); + })} + + ); } } diff --git a/src/data/SoundFontLibraryNames.js b/src/data/SoundFontLibraryNames.js index 0d50968a..3e2a4cab 100644 --- a/src/data/SoundFontLibraryNames.js +++ b/src/data/SoundFontLibraryNames.js @@ -1,132 +1,132 @@ const SoundFontLibraryNames = [ - { data_index_name: "acoustic_grand_piano", label: "Grand Piano" }, - // { data_index_name: "bright_acoustic_piano" }, - { data_index_name: "electric_grand_piano", label: "Electric Piano" }, - { data_index_name: "honkytonk_piano", label: "Honkeytonk Piano" }, - // { data_index_name: "electric_piano_1" }, - // { data_index_name: "electric_piano_2" }, - // { data_index_name: "harpsichord" }, - { data_index_name: "clavinet", label: "Clavinet" }, - // { data_index_name: "celesta" }, - // { data_index_name: "glockenspiel" }, - // { data_index_name: "music_box" }, - { data_index_name: "vibraphone", label: "Vibrafone" }, - // { data_index_name: "marimba" }, - { data_index_name: "xylophone", label: "Xylophone" }, - // { data_index_name: "tubular_bells" }, - // { data_index_name: "dulcimer" }, - { data_index_name: "drawbar_organ", label: "Drawbar Organ" }, - // { data_index_name: "percussive_organ" }, - // { data_index_name: "rock_organ" }, - // { data_index_name: "church_organ" }, - { data_index_name: "reed_organ", label: "Reed Organ" }, - { data_index_name: "accordion", label: "Accordion" }, - // { data_index_name: "harmonica" }, - // { data_index_name: "tango_accordion" }, - { data_index_name: "acoustic_guitar_nylon", label: "Accoustic Guitar" }, - // { data_index_name: "acoustic_guitar_steel" }, - // { data_index_name: "electric_guitar_jazz" }, - { data_index_name: "electric_guitar_clean", label: "Electric Guitar" }, - // { data_index_name: "electric_guitar_muted" }, - // { data_index_name: "overdriven_guitar" }, - // { data_index_name: "distortion_guitar" }, - // { data_index_name: "guitar_harmonics" }, - { data_index_name: "acoustic_bass", label: "Accoustic Bass" }, - // { data_index_name: "electric_bass_finger" }, - // { data_index_name: "electric_bass_pick" }, - { data_index_name: "fretless_bass", label: "Fretless Bass" }, - // { data_index_name: "slap_bass_1" }, - // { data_index_name: "slap_bass_2" }, - // { data_index_name: "synth_bass_1" }, - // { data_index_name: "synth_bass_2" }, - { data_index_name: "violin", label: "violin" }, - // { data_index_name: "viola" }, - // { data_index_name: "cello" }, - // { data_index_name: "contrabass" }, - // { data_index_name: "tremolo_strings" }, - // { data_index_name: "pizzicato_strings" }, - // { data_index_name: "orchestral_harp" }, - // { data_index_name: "timpani" }, - { data_index_name: "string_ensemble_1", label: "String Ensemble" }, - // { data_index_name: "string_ensemble_2" }, - // { data_index_name: "synth_strings_1" }, - // { data_index_name: "synth_strings_2" }, - // { data_index_name: "choir_aahs" }, - // { data_index_name: "voice_oohs" }, - // { data_index_name: "synth_choir" }, - // { data_index_name: "orchestra_hit" }, - { data_index_name: "trumpet", label: "Trumpet" }, - // { data_index_name: "trombone" }, - // { data_index_name: "tuba" }, - { data_index_name: "muted_trumpet", label: "Muted Trumpet" }, - // { data_index_name: "french_horn" }, - // { data_index_name: "brass_section" }, - // { data_index_name: "synth_brass_1" }, - // { data_index_name: "synth_brass_2" }, - // { data_index_name: "soprano_sax" }, - // { data_index_name: "alto_sax" }, - { data_index_name: "tenor_sax", label: "Tenor Sax" }, - // { data_index_name: "baritone_sax" }, - // { data_index_name: "oboe" }, - // { data_index_name: "english_horn" }, - // { data_index_name: "bassoon" }, - // { data_index_name: "clarinet" }, - // { data_index_name: "piccolo" }, - { data_index_name: "flute", label: "Flute" }, - // { data_index_name: "recorder" }, - // { data_index_name: "pan_flute" }, - // { data_index_name: "blown_bottle" }, - // { data_index_name: "shakuhachi" }, - // { data_index_name: "whistle" }, - // { data_index_name: "ocarina" }, - { data_index_name: "lead_1_square", label: "Lead Square" }, - { data_index_name: "lead_2_sawtooth", label: "Lead Sawtooth" }, - // { data_index_name: "lead_3_calliope" }, - // { data_index_name: "lead_4_chiff" }, - // { data_index_name: "lead_5_charang" }, - // { data_index_name: "lead_6_voice" }, - // { data_index_name: "lead_7_fifths" }, - { data_index_name: "lead_8_bass__lead", label: "Bass Lead" }, - // { data_index_name: "pad_1_new_age" }, - { data_index_name: "pad_2_warm", label: "Pad Warm" }, - // { data_index_name: "pad_3_polysynth" }, - // { data_index_name: "pad_4_choir" }, - { data_index_name: "pad_5_bowed", label: "Pad Bowed" }, - // { data_index_name: "pad_6_metallic" }, - // { data_index_name: "pad_7_halo" }, - // { data_index_name: "pad_8_sweep" }, - // { data_index_name: "fx_1_rain" }, - // { data_index_name: "fx_2_soundtrack" }, - // { data_index_name: "fx_3_crystal" }, - // { data_index_name: "fx_4_atmosphere" }, - // { data_index_name: "fx_5_brightness" }, - // { data_index_name: "fx_6_goblins" }, - // { data_index_name: "fx_7_echoes" }, - // { data_index_name: "fx_8_scifi" }, - // { data_index_name: "sitar" }, - // { data_index_name: "banjo" }, - // { data_index_name: "shamisen" }, - // { data_index_name: "koto" }, - // { data_index_name: "kalimba" }, - // { data_index_name: "bagpipe" }, - // { data_index_name: "fiddle" }, - // { data_index_name: "shanai" }, - // { data_index_name: "tinkle_bell" }, - // { data_index_name: "agogo" }, - { data_index_name: "steel_drums", label: "Steel Drums" }, - // { data_index_name: "woodblock" }, - // { data_index_name: "taiko_drum" }, - // { data_index_name: "melodic_tom" }, - // { data_index_name: "synth_drum" }, - // { data_index_name: "reverse_cymbal" }, - // { data_index_name: "guitar_fret_noise" }, - // { data_index_name: "breath_noise" }, - // { data_index_name: "seashore" }, - // { data_index_name: "bird_tweet" }, - // { data_index_name: "telephone_ring" }, - // { data_index_name: "helicopter" }, - // { data_index_name: "applause" }, - // { data_index_name: "gunshot" }, + { name: "acoustic_grand_piano", label: "Grand Piano" }, + // { name: "bright_acoustic_piano" }, + { name: "electric_grand_piano", label: "Electric Piano" }, + { name: "honkytonk_piano", label: "Honkeytonk Piano" }, + // { name: "electric_piano_1" }, + // { name: "electric_piano_2" }, + // { name: "harpsichord" }, + { name: "clavinet", label: "Clavinet" }, + // { name: "celesta" }, + // { name: "glockenspiel" }, + // { name: "music_box" }, + { name: "vibraphone", label: "Vibrafone" }, + // { name: "marimba" }, + { name: "xylophone", label: "Xylophone" }, + // { name: "tubular_bells" }, + // { name: "dulcimer" }, + { name: "drawbar_organ", label: "Drawbar Organ" }, + // { name: "percussive_organ" }, + // { name: "rock_organ" }, + // { name: "church_organ" }, + { name: "reed_organ", label: "Reed Organ" }, + { name: "accordion", label: "Accordion" }, + // { name: "harmonica" }, + // { name: "tango_accordion" }, + { name: "acoustic_guitar_nylon", label: "Accoustic Guitar" }, + // { name: "acoustic_guitar_steel" }, + // { name: "electric_guitar_jazz" }, + { name: "electric_guitar_clean", label: "Electric Guitar" }, + // { name: "electric_guitar_muted" }, + // { name: "overdriven_guitar" }, + // { name: "distortion_guitar" }, + // { name: "guitar_harmonics" }, + { name: "acoustic_bass", label: "Accoustic Bass" }, + // { name: "electric_bass_finger" }, + // { name: "electric_bass_pick" }, + { name: "fretless_bass", label: "Fretless Bass" }, + // { name: "slap_bass_1" }, + // { name: "slap_bass_2" }, + // { name: "synth_bass_1" }, + // { name: "synth_bass_2" }, + { name: "violin", label: "violin" }, + // { name: "viola" }, + // { name: "cello" }, + // { name: "contrabass" }, + // { name: "tremolo_strings" }, + // { name: "pizzicato_strings" }, + // { name: "orchestral_harp" }, + // { name: "timpani" }, + { name: "string_ensemble_1", label: "String Ensemble" }, + // { name: "string_ensemble_2" }, + // { name: "synth_strings_1" }, + // { name: "synth_strings_2" }, + // { name: "choir_aahs" }, + // { name: "voice_oohs" }, + // { name: "synth_choir" }, + // { name: "orchestra_hit" }, + { name: "trumpet", label: "Trumpet" }, + // { name: "trombone" }, + // { name: "tuba" }, + { name: "muted_trumpet", label: "Muted Trumpet" }, + // { name: "french_horn" }, + // { name: "brass_section" }, + // { name: "synth_brass_1" }, + // { name: "synth_brass_2" }, + // { name: "soprano_sax" }, + // { name: "alto_sax" }, + { name: "tenor_sax", label: "Tenor Sax" }, + // { name: "baritone_sax" }, + // { name: "oboe" }, + // { name: "english_horn" }, + // { name: "bassoon" }, + // { name: "clarinet" }, + // { name: "piccolo" }, + { name: "flute", label: "Flute" }, + // { name: "recorder" }, + // { name: "pan_flute" }, + // { name: "blown_bottle" }, + // { name: "shakuhachi" }, + // { name: "whistle" }, + // { name: "ocarina" }, + { name: "lead_1_square", label: "Lead Square" }, + { name: "lead_2_sawtooth", label: "Lead Sawtooth" }, + // { name: "lead_3_calliope" }, + // { name: "lead_4_chiff" }, + // { name: "lead_5_charang" }, + // { name: "lead_6_voice" }, + // { name: "lead_7_fifths" }, + { name: "lead_8_bass__lead", label: "Bass Lead" }, + // { name: "pad_1_new_age" }, + { name: "pad_2_warm", label: "Pad Warm" }, + // { name: "pad_3_polysynth" }, + // { name: "pad_4_choir" }, + { name: "pad_5_bowed", label: "Pad Bowed" }, + // { name: "pad_6_metallic" }, + // { name: "pad_7_halo" }, + // { name: "pad_8_sweep" }, + // { name: "fx_1_rain" }, + // { name: "fx_2_soundtrack" }, + // { name: "fx_3_crystal" }, + // { name: "fx_4_atmosphere" }, + // { name: "fx_5_brightness" }, + // { name: "fx_6_goblins" }, + // { name: "fx_7_echoes" }, + // { name: "fx_8_scifi" }, + // { name: "sitar" }, + // { name: "banjo" }, + // { name: "shamisen" }, + // { name: "koto" }, + // { name: "kalimba" }, + // { name: "bagpipe" }, + // { name: "fiddle" }, + // { name: "shanai" }, + // { name: "tinkle_bell" }, + // { name: "agogo" }, + { name: "steel_drums", label: "Steel Drums" }, + // { name: "woodblock" }, + // { name: "taiko_drum" }, + // { name: "melodic_tom" }, + // { name: "synth_drum" }, + // { name: "reverse_cymbal" }, + // { name: "guitar_fret_noise" }, + // { name: "breath_noise" }, + // { name: "seashore" }, + // { name: "bird_tweet" }, + // { name: "telephone_ring" }, + // { name: "helicopter" }, + // { name: "applause" }, + // { name: "gunshot" }, ]; export default SoundFontLibraryNames; diff --git a/src/data/TonejsSoundNames.js b/src/data/TonejsSoundNames.js index f18e7e27..8f6aaa83 100644 --- a/src/data/TonejsSoundNames.js +++ b/src/data/TonejsSoundNames.js @@ -1,5 +1,5 @@ const TonejsSoundsNames = [ - { data_index_name: "piano", name: "piano" }, - { data_index_name: "AMSynth", name: "AMSynth" }, + { data_index_name: "piano", label: "piano" }, + { data_index_name: "AMSynth", label: "AMSynth" }, ]; export default TonejsSoundsNames;