I fixed dom Initialized multiple times on renderer.

[jomin398]

The constructor in renderer.js runs initHtml() regardless of whether the dom is existing or not.

before

• used version : 7.8.6v as latest on jsdelivr

class Renderer extends EventEmitter {
    constructor(options, audioElement) {
        /* cutted, rest of codes are same. */
        const [div, shadow] = this.initHtml();
        parent.appendChild(div);
        this.container = div;
        this.scrollContainer = shadow.querySelector('.scroll');
        this.wrapper = shadow.querySelector('.wrapper');
        this.canvasWrapper = shadow.querySelector('.canvases');
        this.progressWrapper = shadow.querySelector('.progress');
        this.cursor = shadow.querySelector('.cursor');
        if (audioElement) {
            shadow.appendChild(audioElement);
        }
        this.initEvents();
    }
    /* cutted, rest of codes are same. */
}

after

/**
 * new or use existing element.
 * @param {function():(ShadowRoot | HTMLDivElement)[]} initHtml
 * @param {HTMLDivElement|HTMLBodyElement} parent parent container
 * @param {?HTMLAudioElement} audioElement
 * @returns {{[x:String]:HTMLDivElement}} container, scrollContainer, wrapper, canvasWrapper, progressWrapper, cursor
 */
export default function initDom(initHtml, parent, audioElement) {
    let [div, shadow] = initHtml();

    //detect already dom is initialized.
    let hasDom = parent.querySelector("div") != null;
    let container = div;
    if (hasDom) {
        //use existing dom element.
        container = parent.querySelector("div");
        shadow = container.shadowRoot;
    } else {
        //parent is not initialized.
        parent.appendChild(div);
    }
    const scrollContainer = shadow.querySelector('.scroll');
    const wrapper = shadow.querySelector('.wrapper');
    const canvasWrapper = shadow.querySelector('.canvases');
    const progressWrapper = shadow.querySelector('.progress');
    const cursor = shadow.querySelector('.cursor');
    if (audioElement && shadow.querySelector("audio") == null) {
        shadow.appendChild(audioElement);
    }
    return { container, scrollContainer, wrapper, canvasWrapper, progressWrapper, cursor };
}

import initDom from './initDom.js';

class Renderer extends EventEmitter {
    constructor(options, audioElement) {
        /* cutted, rest of codes are same. */
        Object.assign(this, initDom(this.initHtml.bind(this), parent, audioElement));
        this.initEvents();
    }
    /* cutted, rest of codes are same. */
}

[katspaugh]

The current behavior is intentional. Wavesurfer should be initialized only once for a given container. It can be destroyed with wavesurfer.destroy() if you have to re-initialize it.

[jomin398]

but i used with plugins, it dosen't initialized only once ...

RGB waveform is main. upper div element is empty (initialized by orignal class)