jQuery播放音乐

原创于 2022-01-02 23:14:42 发布 · 3.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #javascript #前端

该博客展示了如何利用jQuery实现网页中MP3音乐的自动播放、暂停功能。通过为<img>元素添加点击事件，实现了点击图标切换音乐播放状态。页面加载时，音乐将在1秒后开始播放。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过jQuery播放mp3音乐

<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <script th:src="@{/static/js/jquery-3.6.0.js}"></script>
</head>
<body>
	<audio autoplay="autoplay" id="audio" loop="loop">
        <source th:src="@{/static/music/BGM.mp3}" type="audio/MP3">
    </audio>
    <img id="player" class="music_img" th:src="@{/static/music/music-note.png}" alt="">
</body>
<script>
    $(function () {
        let music = $("#audio")[0]; // jQuery对象转dom对象
        let musicImg = $("#player");
        // setTimeout(() => {music.play();}, 1000);  // 1s后自动播放
        musicImg.click(function () {  // 点击图标:播放 or 暂停
           if (music.paused) {
               music.play();
           } else
               music.pause();
        });
    })
</script>
</html>