[HTML]音乐播放器

20230713G001133 · 发表于 2023-9-22 12:08

当你打开该 HTML 文件时，会自动触发 window.onload 事件，并调用 playRandomSong 函数播放随机歌曲。播放器会自动选择一个歌曲进行播放，在播放完一首歌曲后自动随机选择另一首歌曲继续播放

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>

<html>

<head>

    <title>音乐播放器</title>

    <script>

        window.onload = function() {

            var audio = document.getElementById("audioPlayer");

            audio.addEventListener('ended', playRandomSong);

            playRandomSong();

        };



        function playRandomSong() {

            var songs = [

               //这里填写音乐文件的URL,多个URL用换行符分割

            ];



            var randomIndex = Math.floor(Math.random() * songs.length);

            var audio = document.getElementById("audioPlayer");

            audio.src = songs[randomIndex];

            audio.play();



            var currentSongUrl = document.getElementById("currentSongUrl");

            currentSongUrl.textContent = "正在播放：" + songs[randomIndex];

        }

    </script>

</head>

<body>

    <h1 id="currentSongUrl"></h1>

    <audio id="audioPlayer" controls></audio>

</body>

</html>

20230713G001133 · 发表于 2024-3-3 06:42

<!DOCTYPE html>
<html>
<head>
    <title>音乐播放器</title>
    <script>
        var songs = [
            "song1.mp3", // 请替换为实际的歌曲URL
            "song2.mp3",
            "song3.mp3"
            // 更多歌曲...
        ];

        var currentSongIndex = 0;
        var isRandom = false;
        var playlistVisible = false; // 新增变量，用于跟踪播放列表的显示状态

        window.onload = function() {
            var audio = document.getElementById("audioPlayer");
            audio.addEventListener('ended', playNextSong);
            playSong(currentSongIndex);
        };

        function playRandomSong() {
            var randomIndex = Math.floor(Math.random() * songs.length);
            playSong(randomIndex);
        }

        function playSong(index) {
            var audio = document.getElementById("audioPlayer");
            audio.src = songs[index];
            audio.play();

            currentSongIndex = index;
            var currentSongUrl = document.getElementById("currentSongUrl");
            currentSongUrl.textContent = "正在播放：" + songs[index];
        }

        function playNextSong() {
            if(isRandom) {
                playRandomSong();
            } else {
                currentSongIndex = (currentSongIndex + 1) % songs.length;
                playSong(currentSongIndex);
            }
        }

        function playPreviousSong() {
            if(isRandom) {
                playRandomSong();
            } else {
                currentSongIndex = (currentSongIndex - 1 + songs.length) % songs.length;
                playSong(currentSongIndex);
            }
        }

        function togglePlayMode() {
            isRandom = !isRandom;
            document.getElementById("playMode").textContent = isRandom ? "随机播放" : "顺序播放";
        }

        function togglePlaylist() {
            playlistVisible = !playlistVisible;
            var playlistContainer = document.getElementById("playlist");
            if (playlistVisible) {
                showPlaylist();
                playlistContainer.style.display = "block";
            } else {
                playlistContainer.style.display = "none";
            }
        }

        function showPlaylist() {
            var playlistContainer = document.getElementById("playlist");
            playlistContainer.innerHTML = ""; // 清空当前列表
            songs.forEach(function(song, index) {
                var songElement = document.createElement("li");
                songElement.textContent = song;
                songElement.onclick = function() { playSong(index); }; // 添加点击事件
                playlistContainer.appendChild(songElement);
            });
        }
    </script>
</head>
<body>
    <h1 id="currentSongUrl">请选择歌曲播放</h1>
    <audio id="audioPlayer" controls></audio>
    <br/>
    <button>上一首</button>
    <button id="playMode">顺序播放</button>
    <button>下一首</button>
    <button>显示/隐藏播放列表</button>
    <ul id="playlist" style="display:none;"></ul> <!-- 播放列表容器 -->
</body>
</html>

添加歌曲·切换和显示播放列表的按钮

20230713G001133 · 发表于 2024-3-4 13:24

本帖最后由 20230713G001133 于 2024-3-4 13:25 编辑

添加一个CSS

<!DOCTYPE html>
<html>
<head>
    <title>音乐播放器</title>
     <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            background-color: rgb(255, 0, 128); /* 设置背景色为RGB（255，0，128）*/
            color: white; /* 设置文字颜色为白色 */
        }

        h1 {
            margin-top: 20px;
        }

        button {
            padding: 10px 20px;
            margin: 10px;
            font-size: 16px;
            cursor: pointer;
        }

        ul {
            list-style: none;
            padding: 0;
        }

        li {
            margin: 5px;
            cursor: pointer;
        }

        audio {
            margin-top: 20px;
        }

        #playlist {
            display: none;
        }
    </style>
    <script>
        var songs = [

            // 更多歌曲...
        ];

        var currentSongIndex = 0;
        var isRandom = false;
        var playlistVisible = false; // 新增变量，用于跟踪播放列表的显示状态

        window.onload = function() {
            var audio = document.getElementById("audioPlayer");
            audio.addEventListener('ended', playNextSong);
            playSong(currentSongIndex);
        };

        function playRandomSong() {
            var randomIndex = Math.floor(Math.random() * songs.length);
            playSong(randomIndex);
        }

        function playSong(index) {
            var audio = document.getElementById("audioPlayer");
            audio.src = songs[index];
            audio.play();

            currentSongIndex = index;
            var currentSongUrl = document.getElementById("currentSongUrl");
            currentSongUrl.textContent = "正在播放：" + songs[index];
        }

        function playNextSong() {
            if(isRandom) {
                playRandomSong();
            } else {
                currentSongIndex = (currentSongIndex + 1) % songs.length;
                playSong(currentSongIndex);
            }
        }

        function playPreviousSong() {
            if(isRandom) {
                playRandomSong();
            } else {
                currentSongIndex = (currentSongIndex - 1 + songs.length) % songs.length;
                playSong(currentSongIndex);
            }
        }

        function togglePlayMode() {
            isRandom = !isRandom;
            document.getElementById("playMode").textContent = isRandom ? "随机播放" : "顺序播放";
        }

        function togglePlaylist() {
            playlistVisible = !playlistVisible;
            var playlistContainer = document.getElementById("playlist");
            if (playlistVisible) {
                showPlaylist();
                playlistContainer.style.display = "block";
            } else {
                playlistContainer.style.display = "none";
            }
        }

        function showPlaylist() {
            var playlistContainer = document.getElementById("playlist");
            playlistContainer.innerHTML = ""; // 清空当前列表
            songs.forEach(function(song, index) {
                var songElement = document.createElement("li");
                songElement.textContent = song;
                songElement.onclick = function() { playSong(index); }; // 添加点击事件
                playlistContainer.appendChild(songElement);
            });
        }
    </script>
</head>
<body>
    <h1 id="currentSongUrl">请选择歌曲播放</h1>
    <audio id="audioPlayer" controls></audio>
    <br/>
    <button>上一首</button>
    <button id="playMode">顺序播放</button>
    <button>下一首</button>
    <button>显示/隐藏播放列表</button>
    <ul id="playlist" style="display:none;"></ul> <!-- 播放列表容器 -->
</body>
</html>

arvin1024 · 发表于 2023-9-22 12:19

我还以为是那个浮窗音乐播放器诶

leetauy · 发表于 2023-9-22 12:26

本地播放还是在线播放？

vihp · 发表于 2023-9-22 12:42

不错，简单明了

MAOSKE · 发表于 2023-9-22 13:03

感谢分享！

20230713G001133 · 发表于 2023-9-22 13:06

leetauy 发表于 2023-9-22 12:26
本地播放还是在线播放？

从音频文件的URL播放

黑衣麻陶 · 发表于 2023-9-22 13:14

今年是2023不是2013，var三个字代表你的技术年代

bluerabbit · 发表于 2023-9-22 14:13

谢谢分享，加入自己的本地主页了

shanyoumuxi · 发表于 2023-9-22 14:25

从音频文件的在线URL来播放。

zhangj005508 · 发表于 2023-9-22 15:40

让人一看就明白，谢谢分享

帐号		自动登录	找回密码
密码			注册[Register]

[其他原创] [HTML]音乐播放器

免费评分

个人中心