how to destory widget

[oeyoews]

I am trying to use howler to write a player, but since I cannot use tiddlywiki's destroy method, I cannot use howler's unload method to destroy the howler instance. Is there any other way to uninstall the music widget? @Jermolene

/*\
title: $:/plugins/oeyoews/neotw-music-with-howler/music-player.js
type: application/javascript
module-type: widget

neotw-music-with-howler widget

\*/
const { widget: Widget } = require('$:/core/modules/widgets/widget.js');

class MusicWidget extends Widget {
  constructor(parseTreeNode, options) {
    super(parseTreeNode, options);
    this.duration = null;
  }

  render(parent, nextSibling) {
    if (!$tw.browser) return;
    this.parentDomNode = parent;
    this.computeAttributes();
    this.execute();

    const createElement = $tw.utils.domMaker;

    // TODO: support tiddler mid field
    const { id = '2010499842' } = this.attributes;
    const { Howl } = require('howler.min.js');

    const baseURL = 'https://music.163.com/song/media/outer/url?id=';
    const src = `${baseURL}${id}.mp3`;

    // NOTE: rendertext always add p tag automatically
    // const icon = $tw.wiki.renderText(
    //   'text/html',
    //   'text/vnd.tiddlywiki',
    //   '<$iconify />',
    // );

    const MusicIcon =
      '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M9 9l10.5-3m0 6.553v3.75a2.25 2.25 0 01-1.632 2.163l-1.32.377a1.803 1.803 0 11-.99-3.467l2.31-.66a2.25 2.25 0 001.632-2.163zm0 0V2.25L9 5.25v10.303m0 0v3.75a2.25 2.25 0 01-1.632 2.163l-1.32.377a1.803 1.803 0 01-.99-3.467l2.31-.66A2.25 2.25 0 009 15.553z" /> </svg> ';

    const options = {
      src,
      format: ['mp3'],
      autoplay: true,
      volume: 0.5,
      html5: true,
      onload: () => {},
      onend: () => {
        console.log('end');
      },
      onplay: () => {
        new $tw.Notify().display({
          title: '开始播放',
        });
      },
      onpause: () => {
        console.log('pause');
      },
    };

    // TODO: how read meta info on mp3 file
    // TODO: how to uninstall
    const sound = new Howl(options);
    sound.on('load', () => {
      console.log('sound loaded');
      // TODO: not work, 难道是重定向导致的???
      // this.duration = sound.duration();
    });

    const btn = createElement('button', {
      class: 'rounded p-1',
    });
    btn.innerHTML = MusicIcon;

    btn.addEventListener('click', () => {
      if (sound.playing()) {
        sound.pause();
      } else {
        sound.play();
      }
      // toggle spin icon
      btn.classList.toggle('animate-spin');
    });

    const domNode = createElement('div', {
      // TODO: add more function button
      children: [btn],
    });

    // TODO: destory sound
    // sound.unload()

    parent.insertBefore(domNode, nextSibling);
    this.domNodes.push(domNode);
  }

  // destroy() { }
}

/**
 * @description neotw-music-with-howler widget
 */
exports.music = MusicWidget;

[oeyoews]

online test: https://tiddlywiki-starter-kit.vercel.app/#%24%3A%2Fplugins%2Foeyoews%2Fneotw-music-with-howler

[oeyoews]

    if (window.sound) {
      window.sound.pause();
      window.sound.unload();
    }
    window.sound = new Howl(options);

Temporarily using window to solve the problem, but I feel there is a better way

[oeyoews]

    if (window.sound) {
      window.sound.pause();
      window.sound.unload();
    }
    window.sound = new Howl(options);

Temporarily using window to solve the problem, but I feel there is a better way

This only ensures that multiple audios will not be played at the same time, and does not solve the problem of destroying instances.

[pmario]

There are some discussions / issues here at GH. If you search for "destroy" you should find them. There is a reverted PR, which was reverted because of performance implications.

[Jermolene]

Hi @oeyoews even if we had a working "destroy" method on widgets, you'd still find that the audio player would be repeatedly created and deleted as part of the refresh cycle.

You can avoid those issues by making the audio player into a global component that is controlled by messages.

[oeyoews]

https://github.com/Jermolene/TiddlyWiki5/blob/267521ad1b8d78e24dd3ba1209a18546b91e5f3c/core/modules/story.js Is it similar to the way story.js

[Jermolene]

I'd suggest making a startup module that implements the player logic, and listens for tm-music-* messages on the root widget.

Does the player need a user interface? One approach is for your JS module to create a conventional DOM interface overlaid over the wiki interface (presumably as a position: fixed "heads up display").

[oeyoews]

Yeah, the best way is to put it in a fixed place to reduce refresh

[oeyoews]

Temporarily solving the problem by detecting the visibility of elements through the observer

[linonetwo]

Use https://www.npmjs.com/package/@seznam/visibility-observer , see #5945 (comment)