v10/apps/sandbox/templates/html-mux-audio/main.ts

import '@app/styles.css';
import { bindSandboxHtmlLocaleChange, prepareSandboxHtmlLocale, wrapSandboxHtmlI18n } from '@app/shared/html/i18n';
import '@videojs/html/audio/player';
import '@videojs/html/media/google-cast';
import '@videojs/html/media/mux-audio';
import '@videojs/html/media/mux-data';
import { createHtmlSandboxState, createLatestLoader, renderMediaAttrs } from '@app/shared/html/sandbox-state';
import { loadAudioSkinTag } from '@app/shared/html/skins';
import {
  onAutoplayChange,
  onLoopChange,
  onMutedChange,
  onPreloadChange,
  onSkinChange,
  onSourceChange,
} from '@app/shared/sandbox-listener';
import { SOURCES } from '@app/shared/sources';

const html = String.raw;

const state = createHtmlSandboxState();
const loadLatest = createLatestLoader();

async function render() {
  await prepareSandboxHtmlLocale();

  const tag = await loadLatest(() => loadAudioSkinTag(state.skin, state.styling));
  if (!tag) return;

  const mediaAttrs = renderMediaAttrs(state);

  document.getElementById('root')!.innerHTML = wrapSandboxHtmlI18n(html`
    <div class="w-full max-w-xl mx-auto">
      <audio-player>
        <${tag}>
          <mux-audio src="${SOURCES[state.source].url}" ${mediaAttrs} crossorigin="anonymous"></mux-audio>
          <!-- Mux Data and Cast are opt-in media components; no env key is needed for Mux-hosted sources. -->
          <mux-data player-software-name="mux-audio"></mux-data>
          <google-cast></google-cast>
        </${tag}>
      </audio-player>
    </div>
  `);
}

render();

onSkinChange((skin) => {
  state.skin = skin;
  render();
});

onSourceChange((source) => {
  state.source = source;
  render();
});

onAutoplayChange((autoplay) => {
  state.autoplay = autoplay;
  render();
});

onMutedChange((muted) => {
  state.muted = muted;
  render();
});

onLoopChange((loop) => {
  state.loop = loop;
  render();
});

onPreloadChange((preload) => {
  state.preload = preload;
  render();
});

bindSandboxHtmlLocaleChange(render);