Soy un principiante en la programación. Me gustaría preguntar si escribo un reproductor de música en el que quiero poder hacer clic para reproducir y volver a hacer clic para silenciar. ¿Cómo debo escribirlo? yo
lo he intentado varias veces y he fallado.
PD. Debido a que no sé cómo poner el archivo de música en Internet, el archivo de música actual no es válido, es puramente indicativo.
//關閉let tag = true; let music = document.querySelector('#music'); let btn = document.querySelector(".btn"); btn.addEventListener("click", function () { // 如果目前 flag 不是關閉就撥放if (tag) { // music.pause(); music.setAttribute("muted","true"); btn.setAttribute("class", "pause"); tag = false; } else { music.play(); btn.setAttribute("class", "play"); tag = true; } }); body{ height: 500vh; } .btn { width: 60px; height: 60px; background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTmxXsF6UrJ0o-wcYdmXOqSpxZXhMzgcCzyAA&usqp=CAU'); background-size: cover; } .play{ width: 60px; height: 60px; border-radius: 50%; transition: 1s; background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTmxXsF6UrJ0o-wcYdmXOqSpxZXhMzgcCzyAA&usqp=CAU'); background-size: cover; } .pause { width: 60px; height: 60px; border-radius: 50%; transition: 1s; background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcScVjEwKCmnfciiCoEZ6am7ZXoIaVR0rUE_O2H1xWkqDMOZV-mk7i8eMwktqV9nHCsyF3A&usqp=CAU'); background-size: cover; } <audio id="music" controls="controls"> <source src="demo.mp3" type="audio/mp3"> </audio> <div class="btn"></div>Si solo desea reproducir y pausar el audio al hacer clic, entonces este código podría resolver su problema, pero si desea silenciar el audio, puede usar music.muted = true
HTML
<audio id="music" controls="controls"> <source src="https://soundbible.com/mp3/service-bell_daniel_simion.mp3" type="audio/mp3" /> </audio> <div class="btn"></div>CSS
body { height: 100vh; display: grid; place-items: center; } .btn { width: 60px; height: 60px; border-radius: 50%; transition: 1s; background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTmxXsF6UrJ0o-wcYdmXOqSpxZXhMzgcCzyAA&usqp=CAU"); background-size: cover; } .btn.paused { transition: 1s; background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcScVjEwKCmnfciiCoEZ6am7ZXoIaVR0rUE_O2H1xWkqDMOZV-mk7i8eMwktqV9nHCsyF3A&usqp=CAU"); background-size: cover; cursor: pointer; }JavaScript
const music = document.querySelector("#music"); const btn = document.querySelector(".btn"); var playing = false; btn.addEventListener("click", () => { if (!playing) { music.play(); btn.classList.toggle("paused"); playing = true; } else { music.pause(); btn.classList.toggle("paused"); playing = false; } });