Sneyderbg
/ audio-player-template.html
Last active
May 4, 2026 00:41
IPython audio player with matplotlib figures as background.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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
/ ipython_audio_player.html
Last active
May 3, 2026 23:41
Simple audio player with waveform visualization for IPython.display.HTML
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |