fix: support audio loading, only draw visible decompressed samples to graph

Author: seveibar

src/components/ReactTimeSeries/ReactTimeSeries.stories.js

@@ -6,7 +6,7 @@ export default {
   component: ReactTimeSeries,
 }
 
-export const Primary = () => {
+export const SimpleTimeSeries = () => {
   const [sample, setSample] = useState({
     timeData: [
       { time: 0, value: 0 },
@@ -30,3 +30,17 @@ export const Primary = () => {
     />
   )
 }
+
+export const WithAudioURL = () => {
+  const [sample, setSample] = useState({
+    audioUrl:
+      "https://s3.amazonaws.com/datasets.workaround.online/voice-samples/001/voice.mp3",
+  })
+  return (
+    <ReactTimeSeries
+      interface={{}}
+      sample={sample}
+      onModifySample={setSample}
+    />
+  )
+}

src/components/ReactTimeSeries/index.js

@@ -7,6 +7,8 @@ import useGetRandomColorUsingHash from "../../hooks/use-get-random-color-using-h
 
 import MainLayout from "../MainLayout"
 
+import fetchAudioData from "../../utils/fetch-audio-data"
+
 const emptyAr = []
 
 // This is a cloudflare CORs proxy from the project maintainer @seveibar
@@ -50,6 +52,7 @@ export const ReactTimeSeriesWithoutContext = ({
   const timeData = useAsyncMemo(
     async () => {
       if (sampleTimeData) return sampleTimeData
+      return await fetchAudioData(audioUrl)
       // TODO load audioUrl
       // TODO load csvUrl
     },
@@ -103,7 +106,14 @@ export const ReactTimeSeriesWithoutContext = ({
   }, [annotation?.timestamps, getRandomColorUsingHash])
 
   const durationGroups = useMemo(() => {
-    if (!annotation?.durations) return []
+    if (!annotation?.durations)
+      return [
+        {
+          color: "#888888",
+          misc: true,
+          durations: [],
+        },
+      ]
 
     const availableLabels = Array.from(
       new Set(

src/components/Wave/index.js

@@ -9,6 +9,45 @@ const userSelectOffStyle = { userSelect: "none" }
 
 const Container = styled("div")({})
 
+const reduceForVisibleDuration = (data, startTime, visibleDuration) => {
+  const firstInnerIndex = data.findIndex(([t]) => t >= startTime)
+  let visibleSamples = data
+    .slice(firstInnerIndex)
+    .findIndex(([t]) => t >= startTime + visibleDuration)
+  visibleSamples =
+    visibleSamples === -1 ? data.length - firstInnerIndex : visibleSamples
+  const lastInnerIndex = firstInnerIndex + visibleSamples
+
+  data = data.slice(Math.max(0, firstInnerIndex - 1), lastInnerIndex + 1)
+
+  const minDistance = visibleDuration / 200
+  const points = [data[0]]
+  let lastAddedPointIndex = 0
+  for (let i = 1; i < data.length; i++) {
+    if (data[i][0] - points[points.length - 1][0] > minDistance) {
+      // points.push(data[i])
+      const timeSinceLastPoint = data[i][0] - points[points.length - 1][0]
+
+      points.push([
+        data[i][0] - timeSinceLastPoint / 2,
+        Math.max(
+          ...data.slice(lastAddedPointIndex + 1, i + 1).map(([, v]) => v)
+        ),
+      ])
+
+      points.push([
+        data[i][0],
+        Math.min(
+          ...data.slice(lastAddedPointIndex + 1, i + 1).map(([, v]) => v)
+        ),
+      ])
+
+      lastAddedPointIndex = i
+    }
+  }
+  return points
+}
+
 export const Wave = ({
   curves,
   width,
@@ -124,7 +163,11 @@ export const Wave = ({
             key={i}
             stroke={curve.color}
             fill="transparent"
-            points={curve.data
+            points={reduceForVisibleDuration(
+              curve.data,
+              startTimeOnGraph,
+              visibleDuration
+            )
               .map(([t, y]) => {
                 const p = transformMatrix.applyToPoint(t, y)
                 return `${p.x},${p.y}`

src/utils/fetch-audio-data.js

@@ -0,0 +1,23 @@
+export default async (audioUrl) => {
+  const AudioContext = window.AudioContext || window.webkitAudioContext
+  const audioContext = new AudioContext()
+  const audioBuffer = await fetch(audioUrl)
+    .then((res) => res.arrayBuffer())
+    .then((arBuf) => audioContext.decodeAudioData(arBuf))
+
+  // Convert into timeData
+  const channel = audioBuffer.getChannelData(0)
+
+  const blockDuration = 1
+  const samplesPerBlock = audioBuffer.sampleRate * (blockDuration / 1000)
+  const timeData = []
+  for (let i = 0; i < channel.length; i += samplesPerBlock) {
+    const avg =
+      channel.slice(i, i + samplesPerBlock).reduce((acc, a) => acc + a, 0) /
+      samplesPerBlock
+
+    timeData.push({ time: i * (1 / audioBuffer.sampleRate) * 1000, value: avg })
+  }
+
+  return timeData
+}

src/utils/get-minor-major-duration-lines.js

@@ -6,7 +6,11 @@ const months = 30 * days
 const years = 12 * months
 const timeIntervals = [
   ["1 ns", 0.000001],
+  ["10 ns", 0.00001],
+  ["100 ns", 0.0001],
   ["1 us", 0.001],
+  ["10 us", 0.01],
+  ["100 us", 0.1],
   ["1 ms", 1],
   ["5 ms", 5],
   ["50 ms", 50],