How to Hide/Remove Playhead And Axis Label from Graph Canvas

[sagharfrancis20]

I don't want to use the waveform playhead and top axis label on the waveform. Is there any way to achieve it?

I tried giving a playhead a transparent color but it is still showing on waveform now it's very small in width and when I am trying to do the same with the axis but it applies on the bottom also.

[chrisn]

This can't really be done at the moment, and would require new options to be added to the library.

[alxpsr]

@sagharfrancis20 regarding playhead you can use workaround

let peaksInstance = // your preaks instance;

peaksInstance
  .views
  .getView('overview')
  ._playheadLayer
  ._playheadLayer.hide()

I suppose this feature is not supported by design, but... it's javascript, so we can use private fields ;D

[BhubanPadun123]

I don't want to use the waveform playhead and top axis label on the waveform. Is there any way to achieve it?

I tried giving a playhead a transparent color but it is still showing on waveform now it's very small in width and when I am trying to do the same with the axis but it applies on the bottom also.

Following code is remove the time frame from the label

import React, { useEffect, useRef } from "react";
import Peaks from "peaks.js";
import "./WaveFormView.css";

function WaveFormView({ audioUrl, audioContentType, waveformDataUrl }) {
  const zoomviewWaveformRef = useRef(null);
  const overviewWaveformRef = useRef(null);
  const audioElementRef = useRef(null);
  let peaks = null;

  useEffect(() => {
    console.log("WaveformView component mount");
    initPeaks();
    return () => {
      console.log("WaveformView will unmound!!!");
      if (peaks) {
        peaks.destroy();
      }
    };
  }, [audioUrl]);

  const initPeaks = () => {
    const audioContext = new AudioContext();
    const options = {
      zoomview: {
        container: zoomviewWaveformRef.current,
        showAxisLabels: false,
      },
      overview: {
        container: overviewWaveformRef.current,
        showAxisLabels: false,
      },
      mediaElement: audioElementRef.current,
      webAudio: {
        audioContext: audioContext,
        multiChannel: false,
      },

      //showPlayheadTime: true,
    };
    Peaks.init(options, (err, peaks) => {
      if (err) {
        console.log("Error===>", err, peaks);
        //return;
      }
      console.log("===>", peaks);
      peaks = peaks;
      onPeaksReady();
    });
  };

  const onPeaksReady = () => {
    console.log("Peaks.js is now ready");
  };

  return (
    <div>
      <div className="zoomview-container" ref={zoomviewWaveformRef}></div>
      <div className="overview-container" ref={overviewWaveformRef}></div>
      <audio controls="controls" ref={audioElementRef}>
        <source src={audioUrl} />
      </audio>
    </div>
  );
}

export default WaveFormView;

[chrisn]

https://github.com/bbc/peaks.js/commit/ba3c78f6b2c68e6e972c59e9a16b84f394eb4973 adds options to control the top/bottom axis markers.