No edit summary |
No edit summary |
||
| Line 190: | Line 190: | ||
} | } | ||
</style> | </style> | ||
<script> | |||
<script> | |||
import lottieWeb from 'https://cdn.skypack.dev/lottie-web'; | import lottieWeb from 'https://cdn.skypack.dev/lottie-web'; | ||
| Line 420: | Line 408: | ||
customElements.define('audio-player', AudioPlayer); | customElements.define('audio-player', AudioPlayer); | ||
</script> | </script> | ||
<div id="audio-player-container"> | |||
<audio src="" preload="metadata" loop></audio> | |||
<p>audio player ish</p> | |||
<button id="play-icon"></button> | |||
<span id="current-time" class="time">0:00</span> | |||
<input type="range" id="seek-slider" max="100" value="0"> | |||
<span id="duration" class="time">0:00</span> | |||
<output id="volume-output">100</output> | |||
<input type="range" id="volume-slider" max="100" value="100"> | |||
<button id="mute-icon"></button> | |||
</div> | |||
</template> | |||
<audio-player data-src="<!--{$mp3|escape:'urlpathinfo'}-->"></audio-player> | <audio-player data-src="<!--{$mp3|escape:'urlpathinfo'}-->"></audio-player> | ||
</html> | </html> | ||
</includeonly> | </includeonly> | ||
Revision as of 22:24, 12 June 2023
Sample result
Press the button to play/pause
Adjust volume with slider