<template id="media-theme-tailwind-audio">
<style>
@import "https://media-chrome.mux.dev/examples/vanilla/themes/tailwind-audio-theme/output.css";
</style>
<svg class="hidden">
<symbol id="backward" viewBox="0 0 24 24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M8 5L5 8M5 8L8 11M5 8H13.5C16.5376 8 19 10.4624 19 13.5C19 15.4826 18.148 17.2202 17 18.188"></path>
<path d="M5 15V19"></path>
<path d="M8 18V16C8 15.4477 8.44772 15 9 15H10C10.5523 15 11 15.4477 11 16V18C11 18.5523
10.5523 19 10 19H9C8.44772 19 8 18.5523 8 18Z"></path>
</symbol>
<symbol id="play" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M4.5 5.653c0-1.426 1.529-2.33 2.779-1.643l11.54 6.348c1.295.712 1.295 2.573 0
3.285L7.28 19.991c-1.25.687-2.779-.217-2.779-1.643V5.653z" clip-rule="evenodd"></path>
</symbol>
<symbol id="pause" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M6.75 5.25a.75.75 0 01.75-.75H9a.75.75 0 01.75.75v13.5a.75.75 0
01-.75.75H7.5a.75.75 0 01-.75-.75V5.25zm7.5 0A.75.75 0 0115 4.5h1.5a.75.75 0 01.75.75v13.5a.75.75 0
01-.75.75H15a.75.75 0 01-.75-.75V5.25z" clip-rule="evenodd"></path>
</symbol>
<symbol id="forward" viewBox="0 0 24 24">
<path d="M16 5L19 8M19 8L16 11M19 8H10.5C7.46243 8 5 10.4624 5 13.5C5 15.4826 5.85204 17.2202 7 18.188" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M13 15V19" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M16 18V16C16 15.4477 16.4477 15 17 15H18C18.5523 15 19 15.4477 19 16V18C19 18.5523 18.5523 19 18
19H17C16.4477 19 16 18.5523 16 18Z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</symbol>
<symbol id="high" viewBox="0 0 24 24">
<path d="M13.5 4.06c0-1.336-1.616-2.005-2.56-1.06l-4.5 4.5H4.508c-1.141 0-2.318.664-2.66 1.905A9.76 9.76 0
001.5 12c0 .898.121 1.768.35 2.595.341 1.24 1.518 1.905 2.659 1.905h1.93l4.5 4.5c.945.945 2.561.276
2.561-1.06V4.06zM18.584 5.106a.75.75 0 011.06 0c3.808 3.807 3.808 9.98 0 13.788a.75.75 0 11-1.06-1.06
8.25 8.25 0 000-11.668.75.75 0 010-1.06z"></path>
<path d="M15.932 7.757a.75.75 0 011.061 0 6 6 0 010 8.486.75.75 0 01-1.06-1.061 4.5 4.5 0 000-6.364.75.75 0
010-1.06z"></path>
</symbol>
<symbol id="off" viewBox="0 0 24 24">
<path d="M13.5 4.06c0-1.336-1.616-2.005-2.56-1.06l-4.5 4.5H4.508c-1.141 0-2.318.664-2.66 1.905A9.76 9.76 0
001.5 12c0 .898.121 1.768.35 2.595.341 1.24 1.518 1.905 2.659 1.905h1.93l4.5 4.5c.945.945 2.561.276
2.561-1.06V4.06zM17.78 9.22a.75.75 0 10-1.06 1.06L18.44 12l-1.72 1.72a.75.75 0 001.06 1.06l1.72-1.72 1.72
1.72a.75.75 0 101.06-1.06L20.56 12l1.72-1.72a.75.75 0 00-1.06-1.06l-1.72 1.72-1.72-1.72z"></path>
</symbol>
</svg>
<media-controller audio="" class="@container block w-full shadow-xl shadow-black/5" style="
--media-background-color: transparent;
--media-control-background: transparent;
--media-control-hover-background: transparent;
">
<slot name="media" slot="media"></slot>
<media-time-range class="block @md:hidden w-full h-2 min-h-0 p-0 bg-slate-50 focus-visible:ring-slate-700 focus-visible:ring-2" style="
--media-range-track-background: transparent;
--media-time-range-buffered-color: rgb(0 0 0 / .02);
--media-range-bar-color: rgb(79 70 229);
--media-range-track-height: .5rem;
--media-range-thumb-background: rgb(79 70 229);
--media-range-thumb-box-shadow: 0 0 0 2px rgb(255 255 255 / .9);
--media-range-thumb-width: .25rem;
--media-range-thumb-height: 1rem;
--media-preview-time-text-shadow: transparent;
">
<media-preview-time-display slot="preview" class="text-slate-600 text-xs"></media-preview-time-display>
</media-time-range>
<media-control-bar class="h-20 @md:h-16 px-4 w-full bg-white flex items-center justify-between @md:rounded-md @md:ring-1 @md:ring-slate-700/10">
<media-seek-backward-button seek-offset="10" class="w-8 h-8 p-0 group rounded-full focus:outline-none focus-visible:ring-slate-700 focus-visible:ring-2">
<svg slot="icon" aria-hidden="true" class="w-7 h-7 fill-none stroke-slate-500 group-hover:stroke-slate-700">
<use href="#backward"></use>
</svg>
</media-seek-backward-button>
<media-play-button class="h-10 w-10 p-2 mx-3 rounded-full bg-slate-700 hover:bg-slate-900 focus:outline-none focus:ring-slate-700 focus:ring-2 focus:ring-offset-2">
<svg slot="play" aria-hidden="true" class="relative left-px">
<use href="#play"></use>
</svg>
<svg slot="pause" aria-hidden="true">
<use href="#pause"></use>
</svg>
</media-play-button>
<media-seek-forward-button seek-offset="10" class="w-8 h-8 p-0 group relative rounded-full focus:outline-none focus-visible:ring-slate-700 focus-visible:ring-2">
<svg slot="icon" aria-hidden="true" class="w-7 h-7 fill-none stroke-slate-500 group-hover:stroke-slate-700">
<use href="#forward"></use>
</svg>
</media-seek-forward-button>
<div class="hidden @md:block h-full border-l border-slate-700/10 mx-4"></div>
<media-time-display class="hidden @md:block text-slate-500 text-sm rounded-md focus:outline-none focus:ring-slate-700 focus:ring-2"></media-time-display>
<media-time-range class="hidden @md:block h-2 min-h-0 p-0 m-2 rounded-md bg-slate-50 focus-visible:ring-slate-700 focus-visible:ring-2" style="
--media-range-track-background: transparent;
--media-time-buffered-color: rgb(0 0 0 / .02);
--media-range-bar-color: rgb(79 70 229);
--media-range-track-border-radius: 4px;
--media-range-track-height: .5rem;
--media-range-thumb-background: rgb(79 70 229);
--media-range-thumb-box-shadow: 0 0 0 2px rgb(255 255 255 / .9);
--media-range-thumb-width: .25rem;
--media-range-thumb-height: 1rem;
--media-preview-time-text-shadow: transparent;
">
<media-preview-time-display slot="preview" class="text-slate-600 text-xs"></media-preview-time-display>
</media-time-range>
<media-duration-display class="hidden @md:block text-slate-500 text-sm"></media-duration-display>
<media-playback-rate-button class="text-slate-500 rounded-md focus:outline-none focus-visible:ring-slate-700 focus-visible:ring-2"></media-playback-rate-button>
<media-mute-button class="group relative order-first @md:order-none rounded-md focus:outline-none focus-visible:ring-slate-700 focus-visible:ring-2">
<svg slot="high" aria-hidden="true" class="h-5 w-5 fill-slate-500 stroke-slate-500 group-hover:fill-slate-700 group-hover:stroke-slate-700">
<use href="#high"></use>
</svg>
<svg slot="medium" aria-hidden="true" class="h-5 w-5 fill-slate-500 stroke-slate-500 group-hover:fill-slate-700 group-hover:stroke-slate-700">
<use href="#high"></use>
</svg>
<svg slot="low" aria-hidden="true" class="h-5 w-5 fill-slate-500 stroke-slate-500 group-hover:fill-slate-700 group-hover:stroke-slate-700">
<use href="#high"></use>
</svg>
<svg slot="off" aria-hidden="true" class="h-5 w-5 fill-slate-500 stroke-slate-500 group-hover:fill-slate-700 group-hover:stroke-slate-700">
<use href="#off"></use>
</svg>
</media-mute-button>
</media-control-bar>
</media-controller>
</template>
<media-theme template="media-theme-tailwind-audio" class="inline-block w-full leading-none">
<audio slot="media" src="https://stream.mux.com/O4h5z00885HEucNNa1rV02wZapcGp01FXXoJd35AHmGX7g/audio.m4a"></audio>
</media-theme>