Spaces:
Running
on
Zero
Running
on
Zero
File size: 2,312 Bytes
9d3cb0a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
<div id='PLAYER_ID' class='player' style="max-width: MAX_WIDTH;">
<div class='spectrogram' style="padding-top: PADDING_AMOUNT;">
<div class='overlay'></div>
<div class='underlay'>
<img>
</div>
</div>
<div class='audio-controls'>
<button id="playpause" disabled class='playpause' title="play">
<svg class='play-img' width="14px" height="19px" viewBox="0 0 14 19">
<polygon id="Triangle" fill="#000000" transform="translate(9, 9.5) rotate(90) translate(-7, -9.5) " points="7 2.5 16.5 16.5 -2.5 16.5"></polygon>
</svg>
<svg class='pause-img' width="16px" height="19px" viewBox="0 0 16 19">
<g fill="#000000" stroke="#000000">
<rect id="Rectangle" x="0.5" y="0.5" width="4" height="18"></rect>
<rect id="Rectangle" x="11.5" y="0.5" width="4" height="18"></rect>
</g>
</svg>
</button>
<audio class='play'>
<source id='src'>
</audio>
<div class='response'>
<canvas class='response-canvas'></canvas>
</div>
<button id="download" class='download' title="download">
<svg class='download-img' x="0px" y="0px" viewBox="0 0 29.978 29.978" style="enable-background:new 0 0 29.978 29.978;" xml:space="preserve">
<g>
<path d="M25.462,19.105v6.848H4.515v-6.848H0.489v8.861c0,1.111,0.9,2.012,2.016,2.012h24.967c1.115,0,2.016-0.9,2.016-2.012
v-8.861H25.462z"/>
<path d="M14.62,18.426l-5.764-6.965c0,0-0.877-0.828,0.074-0.828s3.248,0,3.248,0s0-0.557,0-1.416c0-2.449,0-6.906,0-8.723
c0,0-0.129-0.494,0.615-0.494c0.75,0,4.035,0,4.572,0c0.536,0,0.524,0.416,0.524,0.416c0,1.762,0,6.373,0,8.742
c0,0.768,0,1.266,0,1.266s1.842,0,2.998,0c1.154,0,0.285,0.867,0.285,0.867s-4.904,6.51-5.588,7.193
C15.092,18.979,14.62,18.426,14.62,18.426z"/>
</g>
</svg>
</button>
</div>
</div>
<script>
var PLAYER_ID = new Player('PLAYER_ID')
PLAYER_ID.load(
"AUDIO_SRC",
"IMAGE_SRC",
"LEVELS_SRC"
)
window.addEventListener("resize", function() {PLAYER_ID.redraw()})
</script>
|