<!-- Header Code -->

<!--Header code for HTML Fragment frag_7 -->


<!-- HTML Fragment frag_7 -->

<!--Preamble for HTML Fragment frag_7-->
<div __AddCode="here" style="position:absolute;left:558px;top:67px;width:392px;height:338px;/*Add Style*/">
    
<div class="control play trigger-audio">
  <span class="left"></span>
  <audio src="http://scotspaul.vside-radio.com:7355/stream" volume="1.0"></audio>
  <span class="right"></span>
</div>

<style>
.control {
    border: 11.2px solid #333;
    border-radius: 50%;
    margin: 20px;
    padding: 28px;
    width: 112px;
    height: 112px;
    font-size: 0;
    white-space: nowrap;
    text-align: center;
    cursor: pointer;
}

.control,
.control .left,
.control .right,
.control:before {
    display: inline-block;
    vertical-align: middle;
    transition: border 0.4s, width 0.4s, height 0.4s, margin 0.4s;
    transition-tiomig-function: cubic-bezier(1, 0, 0, 1);
}

.control:before {
    content: "";
    height: 112px;
}

.control.pause .left,
.control.pause .right {
    margin: 0;
    border-left: 36.96px solid #333;
    border-top: 0 solid transparent;
    border-bottom: 0 solid transparent;
    height: 96.992px;
}

.control.pause .left {
    border-right: 22.4px solid transparent;
}

.control.play .left {
    margin-left: 18.66666667px;
    border-left: 48.496px solid #333;
    border-top: 28px solid transparent;
    border-bottom: 28px solid transparent;
    border-right: 0px solid transparent;
    height: 56px;
}

.control.play .right {
    margin: 0;
    border-left: 48.496px solid #333;
    border-top: 28px solid transparent;
    border-bottom: 28px solid transparent;
    height: 0px;
}

.control:hover {
    border-color: #000;
}

.control:hover .left,
.control:hover .right {
    border-left-color: #000;
}

</style>

<script>
const audioButtons = document.querySelectorAll('.trigger-audio')
const buttonToStopAllAudios = document.querySelector('.fa-stop')

const getAudioElementFromButton = buttonElement =>
    buttonElement.querySelector('audio')

const stopAudioFromButton = buttonElement => {
    // Pause the audio
    getAudioElementFromButton(buttonElement).pause()

    // Update element classes
    buttonElement.classList.add('fa-play')
    buttonElement.classList.remove('fa-pause')
}

const playAudioFromButton = buttonElement => {
    // Pause the audio
    getAudioElementFromButton(buttonElement).play()

    // Update element classes
    buttonElement.classList.remove('fa-play')
    buttonElement.classList.add('fa-pause')
}

audioButtons.forEach(audioButton => {
    audioButton.addEventListener('click', () => {
        // I get this first because I have to pause all the audios before doing anything, so I have to know it this audio was paused or not
        const audioElement = getAudioElementFromButton(audioButton)
        const audioIsPaused = audioElement.paused

        // Stop all audios before starting this one
        audioButtons.forEach(stopAudioFromButton)

        audioIsPaused
            ?
            playAudioFromButton(audioButton) // Play if it's paused
            :
            stopAudioFromButton(audioButton) // Pause if it's playing
    })
})

buttonToStopAllAudios.addEventListener('click', () => {
    audioButtons.forEach(stopAudioFromButton)
})

$('.control').on('mousedown', function() {
    $(this).toggleClass('pause play');
});

$(document).on('keyup', function(e) {
    if (e.which == 32) {
        $('.control').toggleClass('pause play');
    }
});

$('.control').on('mousedown', function() {
    $(this).toggleClass('pause play');
});

$(document).on('keyup', function(e) {
    if (e.which == 32) {
        $('.control').toggleClass('pause play');
    }
});
</script>
</div>
<!--Postamble for HTML Fragment frag_7-->