Estoy usando JavaScript para manejar el botón de reproducción y pausa cuando el usuario hace clic en el botón de pausa de reproducción, pero no funciona en mi caso, arroja el siguiente error en mi consola cuando hace clic en el botón de reproducción Error de tipo no detectado: no se puede leer
properties of null (reading 'addEventListener') at myMusic.js:46:12Aquí está mi función de pausa de reproducción de mango
let audioElement = new Audio('song/Si Tu Te Vas.mp3'); let masterPlay = document.getElementById('masterPlay'); /**Handle play pause click*/ masterPlay.addEventListener('click', () => { if (audioElement.pause() || audioElement.currentTime <= 0) { audioElement.play(); masterPlay.classList.remove('fa-play-circle'); masterPlay.classList.add('fa-pause-circle'); gif.style.opacity = 1; } else { audioElement.pause(); masterPlay.classList.remove('fa-pause-circle'); masterPlay.classList.add('fa-play-circle'); gif.style.opacity = 0; } })mimusica.html
<script type="text/javascript" th:src="@{/js/myMusic.js}"></script> <div class="icons"> <!--Font awsome icon --> <i class="fas fa-3x fa-backward" id="previous"></i> <i class="far fa-3x fa-play-circle" id="masterPlay"></i> <i class="fas fa-3x fa-forward" id="next"></i> </div>Coloque la etiqueta <script> después de <div class="icons">
Los scripts no pueden cargar contenido DOM después de eso
O podría envolver su javascript en:
window.addEventListener('DOMContentLoaded', () => { // Your code here })Para esperar a que el contenido DOM se cargue antes del script :)