Merge pull request #426 from xenharmonic-devs/midi-octave-offset

Make A4 the default reference pitch

src/App.vue

@@ -106,6 +106,7 @@ const colorScheme = ref<"light" | "dark">("light");
 const centsFractionDigits = ref(3);
 const decimalFractionDigits = ref(5);
 const showVirtualQwerty = ref(false);
+const midiOctaveOffset = ref(-1);
 
 // Special keyboard codes also from local storage.
 const deactivationCode = ref("Backquote");
@@ -748,6 +749,9 @@ onMounted(() => {
   if ("showVirtualQwerty" in storage) {
     showVirtualQwerty.value = storage.getItem("showVirtualQwerty") === "true";
   }
+  if ("midiOctaveOffset" in storage) {
+    midiOctaveOffset.value = parseInt(storage.getItem("midiOctaveOffset")!);
+  }
 
   // Fetch special key map
   if ("deactivationCode" in storage) {
@@ -897,6 +901,9 @@ watch(decimalFractionDigits, (newValue) =>
 watch(showVirtualQwerty, (newValue) =>
   window.localStorage.setItem("showVirtualQwerty", newValue.toString())
 );
+watch(midiOctaveOffset, (newValue) =>
+  window.localStorage.setItem("midiOctaveOffset", newValue.toString())
+);
 // Store keymaps
 watch(deactivationCode, (newValue) =>
   window.localStorage.setItem("deactivationCode", newValue)
@@ -993,6 +1000,7 @@ watch(degreeDownCode, (newValue) =>
     :typingKeyboard="typingKeyboard"
     :keyboardMapping="keyboardMapping"
     :showVirtualQwerty="showVirtualQwerty"
+    :midiOctaveOffset="midiOctaveOffset"
     @update:audioDelay="audioDelay = $event"
     @update:mainVolume="mainVolume = $event"
     @update:scaleName="scaleName = $event"
@@ -1018,6 +1026,7 @@ watch(degreeDownCode, (newValue) =>
     @update:centsFractionDigits="centsFractionDigits = $event"
     @update:decimalFractionDigits="decimalFractionDigits = $event"
     @update:showVirtualQwerty="showVirtualQwerty = $event"
+    @update:midiOctaveOffset="midiOctaveOffset = $event"
     @update:deactivationCode="deactivationCode = $event"
     @update:equaveUpCode="equaveUpCode = $event"
     @update:equaveDownCode="equaveDownCode = $event"

src/components/ScaleBuilder.vue

@@ -50,6 +50,8 @@ const props = defineProps<{
   centsFractionDigits: number;
   decimalFractionDigits: number;
   newline: string;
+
+  midiOctaveOffset: number;
 }>();
 
 const emit = defineEmits([
@@ -129,6 +131,7 @@ function doExport(exporter: ExporterKey) {
     scale: props.scale,
     filename: sanitizeFilename(props.scaleName),
     baseMidiNote: props.baseMidiNote,
+    midiOctaveOffset: props.midiOctaveOffset,
     description: props.scaleName,
     lines: props.scaleLines,
     appTitle: APP_TITLE,
@@ -373,7 +376,9 @@ function copyToClipboard() {
             step="1"
             v-model="baseMidiNote"
           />
-          <span>{{ midiNoteNumberToName(baseMidiNote) }}</span>
+          <span>{{
+            midiNoteNumberToName(baseMidiNote, props.midiOctaveOffset)
+          }}</span>
         </div>
 
         <!-- This control is for the 3rd field that is found at the top of kbm files -->

src/exporters/__tests__/test-data.ts

@@ -31,6 +31,7 @@ export function getTestData(appTitle: string) {
     appTitle,
     description: "A scale for testing if the exporter works",
     baseMidiNote: 69,
+    midiOctaveOffset: 0,
     lines: [
       "100.",
       "4\\5",

src/exporters/base.ts

@@ -5,6 +5,7 @@ export type ExporterParams = {
   scale: Scale;
   filename: string;
   baseMidiNote: number;
+  midiOctaveOffset: number;
   name?: string;
   scaleUrl?: string;
   description?: string;

src/exporters/deflemask.ts

@@ -46,7 +46,7 @@ export default class DeflemaskExporter extends BaseExporter {
         continue;
 
       // convert note number to note name
-      let name = midiNoteNumberToName(noteNumber);
+      let name = midiNoteNumberToName(noteNumber, this.params.midiOctaveOffset);
       name = name.length == 2 ? name.slice(0, 1) + "-" + name.slice(1) : name;
 
       // convert cents offset to hex where -100c=00, 0c=80, 100c=FF

src/exporters/kontakt.ts

@@ -30,7 +30,7 @@ export default class KontaktExporter extends BaseExporter {
       "MIDI note " +
       baseMidiNote.toString() +
       " (" +
-      midiNoteNumberToName(baseMidiNote) +
+      midiNoteNumberToName(baseMidiNote, this.params.midiOctaveOffset) +
       ") = " +
       this.params.scale.baseFrequency.toString() +
       " Hz" +

src/utils.ts

@@ -33,10 +33,15 @@ const MIDI_NOTE_NAMES = [
   "B",
 ];
 
-// Find MIDI note name from MIDI note number
-export function midiNoteNumberToName(noteNumber: number) {
+/**
+ * Convert an integer MIDI note number to a name such as A4.
+ * @param noteNumber MIDI note number to convert.
+ * @param octaveOffset Defaults to the English standard: 69 = A4. An offset of zero results in the French standard 69 = A5.
+ * @returns String representation of the MIDI note number.
+ */
+export function midiNoteNumberToName(noteNumber: number, octaveOffset = -1) {
   const remainder = mmod(noteNumber, 12);
-  const quotient = (noteNumber - remainder) / 12;
+  const quotient = (noteNumber - remainder) / 12 + octaveOffset;
   return MIDI_NOTE_NAMES[remainder] + quotient.toString();
 }
 

src/views/PreferencesView.vue

@@ -8,6 +8,7 @@ const props = defineProps<{
   centsFractionDigits: number;
   decimalFractionDigits: number;
   showVirtualQwerty: boolean;
+  midiOctaveOffset: number;
 }>();
 
 const emit = defineEmits([
@@ -17,6 +18,7 @@ const emit = defineEmits([
   "update:decimalFractionDigits",
   "update:virtualKeyboardMode",
   "update:showVirtualQwerty",
+  "update:midiOctaveOffset",
 ]);
 
 const newline = computed({
@@ -39,6 +41,10 @@ const showVirtualQwerty = computed({
   get: () => props.showVirtualQwerty,
   set: (newValue: boolean) => emit("update:showVirtualQwerty", newValue),
 });
+const midiOctaveOffset = computed({
+  get: () => props.midiOctaveOffset,
+  set: (newValue: number) => emit("update:midiOctaveOffset", newValue),
+});
 </script>
 
 <template>
@@ -98,6 +104,16 @@ const showVirtualQwerty = computed({
               <label for="scheme-dark"> Dark </label>
             </span>
           </div>
+          <div class="control">
+            <label for="midiOctaveOffset">MIDI octave offset</label>
+            <input
+              id="midiOctaveOffset"
+              type="number"
+              class="control"
+              step="1"
+              v-model="midiOctaveOffset"
+            />
+          </div>
         </div>
       </div>
       <div class="column">

src/views/ScaleView.vue

@@ -14,6 +14,8 @@ defineProps<{
   centsFractionDigits: number;
   decimalFractionDigits: number;
   newline: string;
+
+  midiOctaveOffset: number;
 }>();
 
 defineEmits([
@@ -38,6 +40,7 @@ defineEmits([
       :centsFractionDigits="centsFractionDigits"
       :decimalFractionDigits="decimalFractionDigits"
       :newline="newline"
+      :midiOctaveOffset="midiOctaveOffset"
       @update:scaleName="$emit('update:scaleName', $event)"
       @update:scaleLines="$emit('update:scaleLines', $event)"
       @update:scale="$emit('update:scale', $event)"