diff --git a/src/components/MainLayout/index.js b/src/components/MainLayout/index.js
index 3061d5d..abdfc26 100644
--- a/src/components/MainLayout/index.js
+++ b/src/components/MainLayout/index.js
@@ -42,6 +42,9 @@ export const MainLayout = ({
   onChangeTimestamps,
   enabledTools = defaultEnabledTools,
   showValues = false,
+  onStartPlayback,
+  onStopPlayback,
+  isPlayingMedia,
 }) => {
   const themeColors = useColors()
   const [activeDurationGroup, setActiveDurationGroup] = useState(null)
@@ -173,6 +176,9 @@ export const MainLayout = ({
         selectedDurationIndex={selectedDurationIndex}
         durationGroups={durationGroups}
         allowCustomLabels={allowCustomLabels}
+        onStartPlayback={onStartPlayback}
+        onStopPlayback={onStopPlayback}
+        isPlayingMedia={isPlayingMedia}
       />
       <Timeline
         timeFormat={timeFormat}
diff --git a/src/components/MainLayout/index.stories.js b/src/components/MainLayout/index.stories.js
index 842e52e..a77a556 100644
--- a/src/components/MainLayout/index.stories.js
+++ b/src/components/MainLayout/index.stories.js
@@ -93,3 +93,32 @@ export const ExampleMiscLayer = () => {
     />
   )
 }
+
+export const AudioPlayback = () => {
+  const [durationGroups, setDurationGroups] = useState([])
+
+  const [timestamps, setTimestamps] = useState([])
+
+  const [isPlayingMedia, setIsPlayingMedia] = useState(false)
+
+  return (
+    <MainLayout
+      timeFormat="dates"
+      curveGroups={[
+        [
+          {
+            data: tesla.curve2017.sort((a, b) => a[0] - b[0]),
+            color: solarized.green,
+          },
+        ],
+      ]}
+      durationGroups={durationGroups}
+      timestamps={timestamps}
+      onChangeTimestamps={setTimestamps}
+      onChangeDurationGroups={setDurationGroups}
+      onStartPlayback={() => setIsPlayingMedia(true)}
+      onStopPlayback={() => setIsPlayingMedia(false)}
+      isPlayingMedia={isPlayingMedia}
+    />
+  )
+}
diff --git a/src/components/MouseTransformHandler/index.js b/src/components/MouseTransformHandler/index.js
index df4ae6a..f050189 100644
--- a/src/components/MouseTransformHandler/index.js
+++ b/src/components/MouseTransformHandler/index.js
@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from "react"
+import React, { useState, useRef, useEffect, useCallback } from "react"
 import { styled } from "@material-ui/core/styles"
 import useEventCallback from "use-event-callback"
 import useToolMode from "../../hooks/use-tool-mode"
@@ -146,14 +146,20 @@ export const MouseTransformHandler = ({
     e.preventDefault()
   })
 
-  // TODO
+  const containerMountCallback = useCallback((ref) => {
+    if (ref === null) {
+      containerRef.current.removeEventListener("wheel", onWheel)
+    }
+    containerRef.current = ref
+    ref.addEventListener("wheel", onWheel, { passive: false })
+  }, [])
+
   return (
     <Container
-      ref={containerRef}
+      ref={containerMountCallback}
       onMouseMove={onMouseMove}
       onMouseDown={onMouseDown}
       onMouseUp={onMouseUp}
-      onWheel={onWheel}
       onContextMenu={onContextMenu}
     >
       {children}
diff --git a/src/components/ReactTimeSeries/ReactTimeSeries.stories.js b/src/components/ReactTimeSeries/ReactTimeSeries.stories.js
index 50b56d3..5634d66 100644
--- a/src/components/ReactTimeSeries/ReactTimeSeries.stories.js
+++ b/src/components/ReactTimeSeries/ReactTimeSeries.stories.js
@@ -172,3 +172,19 @@ export const LargeTimeNoneFormat = () => {
     />
   )
 }
+
+export const AudioPlayback = () => {
+  return (
+    <ReactTimeSeries
+      interface={{
+        timeFormat: "none",
+        allowCustomLabels: true,
+      }}
+      sample={{
+        audioUrl:
+          "https://s3.amazonaws.com/datasets.workaround.online/voice-samples/001/voice.mp3",
+      }}
+      onModifySample={() => null}
+    />
+  )
+}
diff --git a/src/components/ReactTimeSeries/index.js b/src/components/ReactTimeSeries/index.js
index ba3a601..d7fdac6 100644
--- a/src/components/ReactTimeSeries/index.js
+++ b/src/components/ReactTimeSeries/index.js
@@ -1,10 +1,12 @@
-import React, { useMemo, useState } from "react"
+import React, { useMemo, useState, useEffect, useRef } from "react"
 import { setIn } from "seamless-immutable"
 import useEventCallback from "use-event-callback"
 import { useAsyncMemo } from "use-async-memo"
 import { RecoilRoot } from "recoil"
 import useGetRandomColorUsingHash from "../../hooks/use-get-random-color-using-hash"
 import Measure from "react-measure"
+import { useSetTimeCursorTime } from "../../hooks/use-time-cursor-time"
+import useRootAudioElm from "../../hooks/use-root-audio-elm"
 
 import MainLayout from "../MainLayout"
 
@@ -52,6 +54,7 @@ export const ReactTimeSeriesWithoutContext = ({
 
   const timeDataAvailable = [sampleTimeData, audioUrl, csvUrl].some(Boolean)
 
+  const [isPlayingMedia, setIsPlayingMedia] = useState(false)
   const [error, setError] = useState(null)
   const timeData = useAsyncMemo(
     async () => {
@@ -195,6 +198,43 @@ export const ReactTimeSeriesWithoutContext = ({
     if (!widthProp) setWidth(bounds.width)
   })
 
+  const audioSource = useRef()
+
+  const [, setRootAudioElm] = useRootAudioElm()
+  const setTimeCursorTime = useSetTimeCursorTime()
+
+  useEffect(() => {
+    if (audioUrl) {
+      audioSource.current = new Audio(audioUrl)
+      setTimeCursorTime(0)
+    }
+  }, [])
+
+  const onAudioTimeChanged = useEventCallback(() => {
+    setTimeCursorTime(audioSource.current.currentTime * 1000)
+  })
+  const onAudioPaused = useEventCallback(() => {
+    audioSource.current.removeEventListener("timeupdate", onAudioTimeChanged)
+    audioSource.current.removeEventListener("pause", onAudioPaused)
+  })
+
+  const onStartPlayback = useEventCallback(() => {
+    setIsPlayingMedia(true)
+    if (audioSource.current) {
+      audioSource.current.play()
+      audioSource.current.addEventListener("timeupdate", onAudioTimeChanged)
+      audioSource.current.addEventListener("pause", onAudioPaused)
+      setRootAudioElm(audioSource.current)
+    }
+  })
+
+  const onStopPlayback = useEventCallback(() => {
+    setIsPlayingMedia(false)
+    if (audioSource.current) {
+      audioSource.current.pause()
+    }
+  })
+
   if (timeDataLoading) return "loading" // TODO real loader
 
   if (!timeData) {
@@ -228,6 +268,9 @@ export const ReactTimeSeriesWithoutContext = ({
             allowCustomLabels={allowCustomLabels}
             enabledTools={enabledTools}
             showValues={showValues}
+            onStartPlayback={onStartPlayback}
+            onStopPlayback={onStopPlayback}
+            isPlayingMedia={isPlayingMedia}
           />
         </div>
       )}
diff --git a/src/components/Timeline/Timeline.stories.js b/src/components/Timeline/Timeline.stories.js
index 943013d..cae4eea 100644
--- a/src/components/Timeline/Timeline.stories.js
+++ b/src/components/Timeline/Timeline.stories.js
@@ -75,3 +75,22 @@ export const TimeWithTextMarkers = (args) => {
     />
   )
 }
+
+export const TimeWithCurrentTimeCursor = (args) => {
+  const colors = useColors()
+  return (
+    <Timeline
+      {...args}
+      timeFormat="timecolons"
+      width={500}
+      visibleTimeStart={0}
+      visibleTimeEnd={60000 * 80}
+      timeCursorTime={20 * 60000}
+      timestamps={[
+        { time: 10 * 60000, color: colors.cyan, label: "Timestamp 1" },
+        { time: 50 * 60000, color: colors.red, label: "Another Timestamp" },
+      ]}
+      gridLineMetrics={getMinorMajorDurationLines(new Matrix(), 500)}
+    />
+  )
+}
diff --git a/src/components/Timeline/index.js b/src/components/Timeline/index.js
index 66543b6..a03fa9c 100644
--- a/src/components/Timeline/index.js
+++ b/src/components/Timeline/index.js
@@ -1,8 +1,14 @@
-import React from "react"
+import React, { useRef } from "react"
 import range from "lodash/range"
 import { styled } from "@material-ui/core/styles"
 import useColors from "../../hooks/use-colors"
 import TimeStamp from "../TimeStamp"
+import {
+  useTimeCursorTime,
+  useSetTimeCursorTime,
+} from "../../hooks/use-time-cursor-time"
+import useRootAudioElm from "../../hooks/use-root-audio-elm"
+import useEventCallback from "use-event-callback"
 
 import { formatTime } from "../../utils/format-time"
 
@@ -11,6 +17,7 @@ const Container = styled("div")(({ width, themeColors }) => ({
   overflow: "hidden",
   position: "relative",
   height: 64,
+  cursor: "pointer",
   borderBottom: `1px solid ${themeColors.Selection}`,
   color: themeColors.fg,
 }))
@@ -21,6 +28,7 @@ const TimeText = styled("div")(({ x, faded }) => ({
   fontSize: 12,
   fontVariantNumeric: "tabular-nums",
   position: "absolute",
+  top: 16,
   left: x,
   borderLeft: "1px solid rgba(255,255,255,0.5)",
   paddingLeft: 4,
@@ -28,6 +36,17 @@ const TimeText = styled("div")(({ x, faded }) => ({
   opacity: faded ? 0.25 : 0.75,
 }))
 
+const TimeCursor = styled("div")(({ left, themeColors }) => ({
+  position: "absolute",
+  width: 0,
+  height: 0,
+  top: 0,
+  left: left - 6,
+  borderLeft: "8px solid transparent",
+  borderRight: "8px solid transparent",
+  borderTop: `12px solid ${themeColors.green}`,
+}))
+
 const Svg = styled("svg")({
   position: "absolute",
   left: 0,
@@ -43,6 +62,7 @@ export const Timeline = ({
   gridLineMetrics,
   onClickTimestamp,
   onRemoveTimestamp,
+  timeCursorTime: timeCursorTimeProp,
 }) => {
   const themeColors = useColors()
   const visibleDuration = visibleTimeEnd - visibleTimeStart
@@ -51,6 +71,11 @@ export const Timeline = ({
   const timeTextTimes = range(timeTextCount).map(
     (i) => visibleTimeStart + (visibleDuration / timeTextCount) * i
   )
+  const recoilTimeCursorTime = useTimeCursorTime()
+  const setTimeCursorTime = useSetTimeCursorTime()
+  const [rootAudioElm] = useRootAudioElm()
+  const timeCursorTime =
+    timeCursorTimeProp === undefined ? recoilTimeCursorTime : timeCursorTimeProp
 
   const {
     numberOfMajorGridLines,
@@ -58,8 +83,27 @@ export const Timeline = ({
     majorGridLinePixelDistance,
   } = gridLineMetrics
 
+  const containerRef = useRef()
+
+  const onClickTimeline = useEventCallback((e) => {
+    if (!rootAudioElm) return
+    const { clientX } = e
+    const pxDistanceFromStart =
+      clientX - containerRef.current.getBoundingClientRect().left
+    const time =
+      (pxDistanceFromStart / width) * (visibleTimeEnd - visibleTimeStart) +
+      visibleTimeStart
+    rootAudioElm.currentTime = time / 1000
+    setTimeCursorTime(time)
+  })
+
   return (
-    <Container themeColors={themeColors} width={width}>
+    <Container
+      ref={containerRef}
+      themeColors={themeColors}
+      width={width}
+      onClick={rootAudioElm ? onClickTimeline : undefined}
+    >
       {range(timeTextCount).map((timeTextIndex) => (
         <TimeText
           key={timeTextIndex}
@@ -102,6 +146,12 @@ export const Timeline = ({
           />
         )
       })}
+      {timeCursorTime !== undefined && (
+        <TimeCursor
+          themeColors={themeColors}
+          left={((timeCursorTime - visibleTimeStart) / visibleDuration) * width}
+        />
+      )}
     </Container>
   )
 }
diff --git a/src/components/Toolbar/Toolbar.stories.js b/src/components/Toolbar/Toolbar.stories.js
index 29b1f3c..b5ceeb9 100644
--- a/src/components/Toolbar/Toolbar.stories.js
+++ b/src/components/Toolbar/Toolbar.stories.js
@@ -41,6 +41,9 @@ export const Primary = () => {
           )
         )
       }}
+      onStartPlayback={() => null}
+      onStopPlayback={() => null}
+      isPlayingMedia={false}
     />
   )
 }
diff --git a/src/components/Toolbar/index.js b/src/components/Toolbar/index.js
index 47c330d..9a3f10d 100644
--- a/src/components/Toolbar/index.js
+++ b/src/components/Toolbar/index.js
@@ -18,6 +18,8 @@ import NormalSelect from "react-select"
 import LocationOnIcon from "@material-ui/icons/LocationOn"
 import TimelapseIcon from "@material-ui/icons/Timelapse"
 import ZoomInIcon from "@material-ui/icons/ZoomIn"
+import PlayCircleOutlineIcon from "@material-ui/icons/PlayCircleOutline"
+import PauseCircleOutlineIcon from "@material-ui/icons/PauseCircleOutline"
 import Color from "color"
 
 const Container = styled("div")(({ themeColors }) => ({
@@ -96,6 +98,9 @@ export const Toolbar = ({
   selectedDurationIndex,
   onChangeSelectedItemLabel,
   allowCustomLabels = false,
+  onStartPlayback,
+  onStopPlayback,
+  isPlayingMedia = false,
 }) => {
   const themeColors = useColors()
   const [mode, setToolMode] = useToolMode()
@@ -219,6 +224,22 @@ export const Toolbar = ({
         )}
       </Box>
       <ButtonGroup size="small">
+        {onStartPlayback && !isPlayingMedia && (
+          <Button
+            onClick={onStartPlayback}
+            className={classnames({ active: isPlayingMedia })}
+          >
+            <PlayCircleOutlineIcon />
+          </Button>
+        )}
+        {onStopPlayback && isPlayingMedia && (
+          <Button
+            onClick={onStopPlayback}
+            className={classnames({ active: isPlayingMedia })}
+          >
+            <PauseCircleOutlineIcon />
+          </Button>
+        )}
         <Button
           onClick={onSelectCreateTool}
           className={classnames({ active: mode === "create" })}
diff --git a/src/components/Wave/index.js b/src/components/Wave/index.js
index ec0e268..962e78c 100644
--- a/src/components/Wave/index.js
+++ b/src/components/Wave/index.js
@@ -4,6 +4,7 @@ import { styled } from "@material-ui/core/styles"
 import colorAlpha from "color-alpha"
 import useColors from "../../hooks/use-colors"
 import { formatTime } from "../../utils/format-time"
+import { useTimeCursorTime } from "../../hooks/use-time-cursor-time"
 import HighlightValueLabels from "../HighlightValueLabels"
 
 const userSelectOffStyle = {
@@ -63,10 +64,16 @@ export const Wave = ({
   durationGroups = [],
   timestamps = [],
   gridLineMetrics,
+  timeCursorTime,
   showValues = false,
 }) => {
   const colors = useColors()
 
+  const recoilTimeCursorTime = useTimeCursorTime()
+
+  timeCursorTime =
+    timeCursorTime === undefined ? recoilTimeCursorTime : timeCursorTime
+
   const {
     visibleDuration,
     startTimeOnGraph,
@@ -79,6 +86,11 @@ export const Wave = ({
     minorGridLinePixelDistance,
   } = gridLineMetrics
 
+  const timeCursorXPosition =
+    timeCursorTime !== undefined
+      ? transformMatrix.applyToPoint(timeCursorTime, 0).x
+      : undefined
+
   const visibleTransformedPointsOnCurves = useMemo(() => {
     const visibleTransformedPointsOnCurves = []
     for (const curve of curves) {
@@ -204,6 +216,16 @@ export const Wave = ({
           />
         )
       })}
+      {timeCursorTime !== undefined && (
+        <line
+          x1={timeCursorXPosition}
+          x2={timeCursorXPosition}
+          y1={0}
+          y2={height}
+          stroke={colors.green}
+          strokeWidth={1}
+        />
+      )}
       {showValues && (
         <HighlightValueLabels
           visibleTransformedPointsOnCurves={visibleTransformedPointsOnCurves}
diff --git a/src/components/Wave/index.stories.js b/src/components/Wave/index.stories.js
index bdd775c..639da35 100644
--- a/src/components/Wave/index.stories.js
+++ b/src/components/Wave/index.stories.js
@@ -1,6 +1,7 @@
 import React from "react"
 import range from "lodash/range"
 import Matrix from "immutable-transform-matrix"
+import getMinorMajorDurationLines from "../../utils/get-minor-major-duration-lines"
 
 import Wave from "./"
 
@@ -20,11 +21,15 @@ const curve2 = {
   data: range(500).map((i) => [i, Math.cos(i / 40) * 100]),
 }
 
+const topLevelMatrix = new Matrix().translate(0, 100)
+const gridLineMetrics = getMinorMajorDurationLines(topLevelMatrix, 500)
+
 export const SingleCurve = () => (
   <Wave
     curves={[curve1]}
     width={500}
     height={200}
+    gridLineMetrics={gridLineMetrics}
     transformMatrix={new Matrix().translate(0, 100)}
   />
 )
@@ -34,6 +39,7 @@ export const DoubleCurve = () => (
     curves={[curve1, curve2]}
     width={500}
     height={200}
+    gridLineMetrics={gridLineMetrics}
     transformMatrix={new Matrix().translate(0, 100)}
   />
 )
@@ -44,6 +50,7 @@ export const DoubleCurveWithDuration = () => (
     width={500}
     height={200}
     transformMatrix={new Matrix().translate(0, 100)}
+    gridLineMetrics={gridLineMetrics}
     durationGroups={[
       {
         color: "#f00",
@@ -59,6 +66,7 @@ export const DoubleCurveWithTimestamp = () => (
     width={500}
     height={200}
     transformMatrix={new Matrix().translate(0, 100)}
+    gridLineMetrics={gridLineMetrics}
     timestamps={[
       {
         time: 250,
@@ -67,3 +75,14 @@ export const DoubleCurveWithTimestamp = () => (
     ]}
   />
 )
+
+export const DoubleCurveWithTimeCursor = () => (
+  <Wave
+    curves={[curve1, curve2]}
+    width={500}
+    height={200}
+    transformMatrix={new Matrix().translate(0, 100)}
+    gridLineMetrics={gridLineMetrics}
+    timeCursorTime={250}
+  />
+)
diff --git a/src/hooks/use-root-audio-elm.js b/src/hooks/use-root-audio-elm.js
new file mode 100644
index 0000000..60481c9
--- /dev/null
+++ b/src/hooks/use-root-audio-elm.js
@@ -0,0 +1,9 @@
+import { atom, useRecoilState } from "recoil"
+
+export const rootAudioElmAtom = atom({
+  key: "rootAudioElmAtom",
+})
+
+export const useRootAudioElm = () => useRecoilState(rootAudioElmAtom)
+
+export default useRootAudioElm
diff --git a/src/hooks/use-time-cursor-time.js b/src/hooks/use-time-cursor-time.js
new file mode 100644
index 0000000..e5dd31f
--- /dev/null
+++ b/src/hooks/use-time-cursor-time.js
@@ -0,0 +1,9 @@
+import { atom, useSetRecoilState, useRecoilValue } from "recoil"
+
+export const timeCursorTimeAtom = atom({
+  key: "timeCursorTime",
+})
+
+export const useSetTimeCursorTime = () => useSetRecoilState(timeCursorTimeAtom)
+
+export const useTimeCursorTime = () => useRecoilValue(timeCursorTimeAtom)