У меня есть пара радиоисточников:
Радио 1 - http://ice3.securenetsystems.net/CKDX?playSessionID=2F01BCBA-BE9D-2A65-5B280ECE3E397AFE
Радио 2 - http://ice5.securenetsystems.net/CIRV?playSessionID=2EFE4082-EC1E-6FA0-10941E29181F671A
Первоначально они работают нормально, но когда я помещаю эти источники в HTML перед src
, они перестают работать, и он не может воспроизводить звук.
Вот мой код:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="container">
<span class="trigger-audio fa fa-play">
<audio src="http://ice3.securenetsystems.net/CKDX?playSessionID=2F01BCBA-BE9D-2A65-5B280ECE3E397AFE"
volume="1.0">
</audio>
</span>
<br>
<br>
<br>
<span class="trigger-audio fa fa-play">
<audio src="http://ice5.securenetsystems.net/CIRV?playSessionID=2EFE4082-EC1E-6FA0-10941E29181F671A"
volume="1.0">
</audio>
</span>
<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)
})
</script>
Какой самый простой способ это исправить?
Я новичок, поэтому любая помощь будет оценена. :)