html漂亮的音乐播放器代码

发布时间：2025-12-10 13:16:22 浏览次数：4

HTML是构建网页的基础语言，可以使用它创建出漂亮的音乐播放器，带来更好的用户体验。

<!DOCTYPE html><html><head><title>音乐播放器</title><link rel="stylesheet" href="style.css"></head><body><audio src="music.mp3" controls></audio><script src="script.js"></script></body></html>

上面的代码创建了一个包含音乐文件的音乐播放器，并为其添加了样式表和脚本文件。接下来，我们将使用CSS使它更漂亮。

audio {width: 100%;max-width: 500px;margin: 20px auto;display: block;}audio::-webkit-media-controls {display: none;}.play-btn, .pause-btn {display: inline-block;background-color: #333;color: #fff;padding: 5px 10px;text-align: center;cursor: pointer;}.play-btn:hover, .pause-btn:hover {background-color: #666;}

上面的CSS规则设置了音乐播放器的样式，包括设置宽度、最大宽度、边距、隐藏默认控件，以及创建播放和暂停按钮的样式。最后，我们将使用JavaScript为按钮添加交互效果。

var audio = document.getElementsByTagName('audio')[0];var playBtn = document.getElementsByClassName('play-btn')[0];var pauseBtn = document.getElementsByClassName('pause-btn')[0];playBtn.addEventListener('click', function() {audio.play();});pauseBtn.addEventListener('click', function() {audio.pause();});

上面的JavaScript代码获取音乐播放器元素和播放、暂停按钮元素，然后为按钮添加点击事件，分别调用音频的play()和pause()方法。这使用户可以控制音乐的播放和暂停。

总之，HTML、CSS和JavaScript都可以创建漂亮的音乐播放器，让用户享受美妙的音乐。

上一篇：电脑出现依赖服务或组无法启动错误怎么办下一篇：手机不能发短信是怎么回事

综合百科

html漂亮的音乐播放器代码

综合百科

网站导航