欢迎光临 - 我的站长站,本站所有资源仅供学习与参考,禁止用于商业用途或从事违法行为!

js教程

简单的JS网页音乐播放器,打开网页自动随机播放音乐

js教程 我的站长站 2023-09-25 共55人阅读

超简单的JS网页音乐播放器,代码简单明了,小白也会用。当你打开HTML网页时,JS会自动触发 window.onload事件,并调用 playRandomSong函数播放随机歌曲。播放器会自动选择一个歌曲进行播放,在播放完一首歌曲后自动随机选择另一首歌曲继续播放。

<!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>


相关推荐
  • 音乐播放器源码
  • 仿绚丽彩虹音乐播放器源码
    仿绚丽彩虹音乐播放器源码

    环境要求php5.6或7.0,7.0以上不支持mysql5.6或5.7源码截图安装方法CoreConfig/config.php 数据库配置导入1.sql修改文件PublicXPlayerjs/player.js搜索http://piphp.com一共 2 处全部换成http://...

    php源码 199 3年前
  • MKOnlinePlayer v2.4 在线音乐源码
    MKOnlinePlayer v2.4 在线音乐源码

    MKOnlinePlayerv2.4 1/修复网易云音乐无法播放2/增加标题栏滚动效果(感谢@lzcykevin)3/增加歌曲循环播放控制(感谢@yuxizhe)4/修复百度音乐无法播放5/优化连续播放失败的歌曲过多时,自动终止播放...

    php源码 605 4年前
  • 收费音乐免费下载解析PHP源码
    收费音乐免费下载解析PHP源码

    源码安装教程把下载好的源码 传到PHP运行环境即可,其他的大家可以根据情况自行修改。源码截图网站的标题在目录的index.html内修改。标题修改<title>音乐解析-By MK</title>LOGO修改<div class="l...

    php源码 1133 5年前
  • 全网收费音乐解析源码,支持音乐搜索播放下载
    全网收费音乐解析源码,支持音乐搜索播放下载

    源码介绍多站合一音乐搜索解决方案,支持搜索试听以下网站音乐:网易云音乐 QQ音乐 酷狗音乐 酷我音乐 虾米音乐 百度音乐 一听音乐 咪咕音乐 荔枝FM 蜻蜓FM 喜马拉雅FM 全民K歌 5sing原创 5sing翻唱...

    php源码 1204 5年前
  • PHP全网平台音乐解析在线播放器3.0.3源码
    PHP全网平台音乐解析在线播放器3.0.3源码

    源码说明源码截图1.修正systemdatabase.php内的数据库衔接信息2.导入sqlmusic.sql数据文件到您的数据库内后台地址:admin/main.php 默许账号:admin 密码:123456温馨提示:本程序基于开源项目MKOnlineM...

    php源码 1165 5年前