Make random waveform peaks deterministic

src/components/VAudioTrack/VAudioTrack.vue

@@ -19,6 +19,7 @@
         <VWaveform
           v-bind="waveformProps"
           :peaks="audio.peaks"
+          :audio-id="audio.id"
           :current-time="currentTime"
           :duration="duration"
           :message="message ? $t(`audio-track.messages.${message}`) : null"

src/components/VAudioTrack/VGlobalAudioTrack.vue

@@ -5,6 +5,7 @@
         <VWaveform
           v-bind="waveformProps"
           :peaks="audio.peaks"
+          :audio-id="audio.id"
           :current-time="currentTime"
           :duration="duration"
           :message="message"

src/components/VAudioTrack/VWaveform.vue

@@ -172,6 +172,8 @@ import { keycodes } from '~/constants/key-codes'
 
 import type { AudioFeature } from '~/constants/audio'
 
+import { hash, rand as prng } from '~/utils/prng'
+
 import type { CSSProperties } from '@vue/runtime-dom'
 
 /**
@@ -236,6 +238,13 @@ export default defineComponent({
       type: Object as PropType<Record<AudioFeature, boolean>>,
       default: () => ({}),
     },
+    /**
+     * Audio id to make the randomly-created peaks deterministic.
+     */
+    audioId: {
+      type: String,
+      required: true,
+    },
   },
   emits: [
     /**
@@ -336,10 +345,13 @@ export default defineComponent({
     const peakCount = computed(() =>
       getPeaksInWidth(waveformDimens.value.width)
     )
+
+    const createRandomPeaks = (audioId: string) => {
+      const rand = prng(hash(audioId))
+      return Array.from({ length: 100 }, () => rand())
+    }
     const peaks = computed(() =>
-      props.peaks?.length
-        ? props.peaks
-        : Array.from({ length: 100 }, () => Math.random())
+      props.peaks?.length ? props.peaks : createRandomPeaks(props.audioId)
     )
     const normalizedPeaks = computed(() => {
       let samples = peaks.value

src/locales/po-files/openverse.pot

@@ -4,7 +4,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: Openverse \n"
 "Report-Msgid-Bugs-To: https://github.com/wordpress/openverse/issues \n"
-"POT-Creation-Date: 2022-05-24T15:12:45+00:00\n"
+"POT-Creation-Date: 2022-06-08T09:57:11+00:00\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
@@ -254,13 +254,13 @@ msgid "Replay"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/components/VAudioTrack/VAudioTrack.vue:385
+#: src/components/VAudioTrack/VAudioTrack.vue:386
 msgctxt "audio-track.aria-label"
 msgid "###title### - Audio Player"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/components/VAudioTrack/VAudioTrack.vue:382
+#: src/components/VAudioTrack/VAudioTrack.vue:383
 msgctxt "audio-track.aria-label-interactive"
 msgid "###title### - audio player - press the spacebar to play and pause a preview of the audio"
 msgstr ""
@@ -308,7 +308,7 @@ msgid "Audio seek bar"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/components/VAudioTrack/VWaveform.vue:609
+#: src/components/VAudioTrack/VWaveform.vue:621
 msgctxt "waveform.current-time"
 msgid "###time### second"
 msgid_plural "###time### seconds"

test/unit/specs/components/AudioTrack/waveform.spec.js

@@ -16,6 +16,7 @@ describe('VWaveform', () => {
   beforeEach(() => {
     props = {
       peaks: [],
+      audioId: 'test',
     }
 
     options = {