音板

html部分

applauseboogasptadavictorywrong

css 部分

* {margin: 0;padding: 0;
}body {background-color: rgb(161, 100, 233);height: 100vh;overflow: hidden;display: flex;justify-content: center;align-items: center;
}.btn {background-color: rebeccapurple;border-radius: 5px;border: none;color: white;margin: 1rem;padding: 1rem 3rem;font-size: 1.2rem;cursor: pointer;
}.btn:hover {opacity: 0.9;
}.btn:focus {outline: none;
}

js部分

// 获取dom
const btns = document.querySelectorAll('.btn');
const audios = document.querySelectorAll('audio');btns.forEach((item) => {item.addEventListener('click', () => {stop_play()// 根据按钮获取audio媒体const audio = document.querySelector(`#${item.innerHTML}`)// 播放audio.play();})})// 停止当前播放的音乐
function stop_play() {audios.forEach((item) => {item.pause();item.currentTime = 0;})}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！