Skip to content

Instantly share code, notes, and snippets.

View Sneyderbg's full-sized avatar
💭
(¬‿¬)

Sneyderbg

💭
(¬‿¬)
View GitHub Profile
@Sneyderbg
Sneyderbg / audio-player-template.html
Last active May 4, 2026 00:41
IPython audio player with matplotlib figures as background.
<style>
.ap-__ID__ {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
user-select: none;
-webkit-user-select: none;
background: #1e1e1e;
border-radius: 8px;
padding: 10px 10px 6px 10px;
box-sizing: border-box;
width: calc(__WIDTH__px + 20px);
@Sneyderbg
Sneyderbg / ipython_audio_player.html
Last active May 3, 2026 23:41
Simple audio player with waveform visualization for IPython.display.HTML
<div id="audio-player-container" style="display: flex; flex-direction: column; align-items: center; border: red 1px solid">
<canvas id="waveform-canvas" width="900" height="200" style="cursor: pointer; border-radius: 8px;"></canvas>
<div style="display: flex; align-items: center; gap: 12px; margin-top: 10px; font-family: monospace; font-size: 14px;">
<button id="play-btn" style="width: 40px; height: 40px; border-radius: 50%; border: none; background: #4285f4; color: white; font-size: 16px; cursor: pointer;">▶</button>
<span id="time-display">0:00 / 0:00</span>
<input id="volume-slider" type="range" min="0" max="1" step="0.01" value="1" style="width: min(400px, 50dvw);" title="Volume">
</div>
<audio id="audio-element" src="data:audio/mpeg;base64,{audio_b64}" preload="auto"></audio>
</div>
<script>