HTML5+CSS3+JS实现简单的音乐播放

最新推荐文章于 2024-04-22 11:07:02 发布

小激动. Caim

最新推荐文章于 2024-04-22 11:07:02 发布

阅读量1.1k

点赞数

分类专栏：网站建设基础（html+div+css）文章标签： javascript html5 css

本文链接：https://blog.csdn.net/dica54dica/article/details/130191720

版权

网站建设基础（html+div+css）专栏收录该内容

11 篇文章 4 订阅

订阅专栏

下面是一个简单的HTML5+CSS3+JS实现音乐播放器的示例代码：

HTML部分：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>音乐播放器</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>音乐播放器</h1>
        <audio id="myAudio" controls>
            <source src="music.mp3" type="audio/mpeg">
        </audio>
        <button id="playButton">播放</button>
        <button id="pauseButton">暂停</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS部分：

.container {
    text-align: center;
    margin-top: 10%;
}
h1 {
    font-size: 3em;
    margin-bottom: 30px;
}
button {
    margin-top: 20px;
    font-size: 1.5em;
}

JS部分：

var myAudio = document.getElementById("myAudio");
var playButton = document.getElementById("playButton");
var pauseButton = document.getElementById("pauseButton");
playButton.addEventListener("click", function() {
    myAudio.play();
});
pauseButton.addEventListener("click", function() {
    myAudio.pause();
});

在上面的代码中，我们使用了HTML5的标签来嵌入音乐，并添加了两个按钮用于控制音乐播放。然后，我们使用CSS样式对页面进行了简单的美化。最后，我们使用JavaScript来监听按钮点击事件，并调用play()和pause()函数来控制音乐的播放和暂停。当然，这只是一个最简单的音乐播放器示例，还可以添加更多的功能和样式来进行扩展。

完整代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>音乐播放器</title>
        <style>
.container {
    text-align: center;
    margin-top: 10%;
}
h1 {
    font-size: 3em;
    margin-bottom: 30px;
}
button {
    margin-top: 20px;
    font-size: 1.5em;
}
    </style>
</head>
<body>
    <div class="container">
        <h1>音乐播放器</h1>
        <audio id="myAudio" controls>
            <source src="music.mp3" type="audio/mpeg">
        </audio>
        <button id="playButton">播放</button>
        <button id="pauseButton">暂停</button>
    </div>
    <script>
var myAudio = document.getElementById("myAudio");
var playButton = document.getElementById("playButton");
var pauseButton = document.getElementById("pauseButton");
playButton.addEventListener("click", function() {
    myAudio.play();
});
pauseButton.addEventListener("click", function() {
    myAudio.pause();
});
    </script>
</body>
</html>

界面效果如下：
简单的音乐播放

小激动. Caim

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
HTML5+CSS3+JS实现简单的音乐播放

在上面的代码中，我们使用了HTML5的标签来嵌入音乐，并添加了两个按钮用于控制音乐播放。然后，我们使用CSS样式对页面进行了简单的美化。最后，我们使用JavaScript来监听按钮点击事件，并调用play()和pause()函数来控制音乐的播放和暂停。当然，这只是一个最简单的音乐播放器示例，还可以添加更多的功能和样式来进行扩展。
复制链接

扫一扫