My Code: https://jsfiddle.net/1xcyy92x/
<button id="playButton" style="display:block;width: 606px;height:50px;border-radius:50px;background-image: linear-gradient( to right,#000000 83px,#0059dd 83px, #0059dd 86px, #000000 86px, #000000 174px, #0059dd 174px, #0059dd 177px, #000000 177px );border: 3px solid #0059dd; cursor: pointer;"
onclick="
var button = document.getElementById('playButton');
var player = document.getElementById('player');
if (player.paused) {
playButton.innerHTML = '';
playButton.style.background = 'linear-gradient( to right, #0ff 83px,#0059dd 83px, #0059dd 86px, #fff 86px, #fff 174px, #0059dd 174px, #0059dd 177px, #f0f 177px )';
player.play();
} else {
playButton.innerHTML = '';
playButton.style.background = 'linear-gradient( to right, #000000 83px,#0059dd 83px, #0059dd 86px, #000000 86px, #000000 174px, #0059dd 174px, #0059dd 177px, #000000 177px )';
player.pause();
}">
</button>
<audio id="player" style="display:none;">
<source src='http://hi5.1980s.fm/;' type='audio/mpeg' />
</audio>
I just figured out how to do it on my own.
<button id="playButton" style="display:block;width: 606px;height:50px;border-radius:50px;background-image: linear-gradient( to right,#000000 199px,#0059dd 199px, #0059dd 202px, #000000 202px, #000000 399px, #0059dd 399px, #0059dd 402px, #000000 402px );border: 3px solid #0059dd; cursor: pointer;"
onclick="
var button = document.getElementById('playButton');
var player = document.getElementById('player');
if (player.paused) {
playButton.innerHTML = '';
playButton.style.background = 'linear-gradient( to right, #0ff 199px,#0059dd 199px, #0059dd 202px, #fff 202px, #fff 399px, #0059dd 399px, #0059dd 402px, #f0f 402px )';
player.play();
} else {
playButton.innerHTML = '';
playButton.style.background = 'linear-gradient( to right, #000000 199px,#0059dd 199px, #0059dd 202px, #000000 202px, #000000 399px, #0059dd 399px, #0059dd 402px, #000000 402px )';
player.pause();
}">
</button>
<audio id="player" style="display:none;">
<source src='http://hi5.1980s.fm/;' type='audio/mpeg' />
</audio>
1 Like
system
Closed
3
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.