html5 Audio多个mp3音频播放 |
您所在的位置：网站首页 › 苹果博客怎么设置播放顺序 › html5 Audio多个mp3音频播放 |
|
html5 Audio多个mp3音频播放 2018-12-07 · 技术积累 · Html (2023-12-04 更新) 通过JS实现HTML页面中多个音频播放，可以作为背景音乐实现控制播放。效果为本站右上角音乐播放按钮 实现: 1 - 顺序/随机播放 (修改对弈代码注释即可) 2 - 点击按钮才加载音乐文件 (不影响网页加载速度) 3 - 歌曲名称和歌曲地址分开 (不用担心换网址要一个个更换) 4 - 进入网页第一次的鼠标后自动播放歌曲 (需要的话去掉注释即可) 5 - 按钮控制 播放/暂停 (按钮显示文字可以随意更改) 6 - 循环播放 (列表中播放完毕后从第一首重新播放) HTML代码 播放音乐JS代码 //音乐名称列表 var music_name = ["Alone.mp3","Nobody.mp3"]; //音乐地址 var arr = music_name.map(function(name) { //网址路径例子：return "https://xxx.com/typecho/mp3/" + name; //本地路径例子：return "/xxx/xxx/" + name; return "歌曲地址" + name; }); // 创建音频元素 var myAudio = new Audio(); myAudio.loop = false; myAudio.preload = "none"; myAudio.controls = false; myAudio.controlsList = "nodownload"; // 打随机乱音乐数组顺序 function shuffle(array) { for (let i = array.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [array[i], array[j]] = [array[j], array[i]]; } return array; }; // 按列表顺序的音乐列表 //var playlist = arr.slice(); // 随机打乱顺序后的音乐列表 var playlist = shuffle(arr.slice()); var currentTrack = 0; //监听页面第一次鼠标点击，自动播放歌曲 //var firstMouseClickDetected = false; /*document.addEventListener('mousedown', function firstMouseClickHandler() { if (!firstMouseClickDetected) { if (myAudio.src === '') { myAudio.src = playlist[currentTrack]; } myAudio.play(); playButton.innerHTML = '暂停音乐'; firstMouseClickDetected = true; } document.removeEventListener('mousedown', firstMouseClickHandler); });*/ // 播放按钮点击事件 var playButton = document.getElementById("playButton"); playButton.addEventListener('click', function() { if (myAudio.paused) { if (myAudio.src === '') { myAudio.src = playlist[currentTrack]; } myAudio.play(); playButton.innerHTML = '暂停音乐'; } else { myAudio.pause(); playButton.innerHTML = '播放音乐'; } }); // 音频播放结束事件 myAudio.addEventListener('ended', playEndedHandler); function playEndedHandler() { currentTrack++; if (currentTrack < playlist.length) { myAudio.src = playlist[currentTrack]; myAudio.play(); } else { currentTrack = 0; myAudio.src = playlist[currentTrack]; myAudio.play(); } }; // 鼠标点击事件，自动播放音乐 var hasClickedOnce = false; // 标记是否已经点击过 document.addEventListener('click', function() { if (!hasClickedOnce) { if (myAudio.paused && myAudio.src === '') { myAudio.src = playlist[currentTrack]; myAudio.play(); playButton.innerHTML = '暂停音乐'; hasClickedOnce = true; // 设置标记以防止进一步点击 } } }); // 将音频元素添加到页面中 document.getElementById("music").appendChild(myAudio); 本文最后记录时间 2023-12-04文章链接地址：https://me.jinchuang.org/archives/337.html 本站文章除注明[转载|引用|来源],均为本站原创内容,转载前请注明出处 纯CSS 蝴蝶飞舞动画效果 技术积累 网页禁用iframe子页面的右键 技术积累 自用的网页鼠标指针 软件工具 CSS3/jQuery实现移动端滑动图片层叠效果 技术积累软件工具mysql 命令连接数据库参数 centos7 基于docker搭建mysql 微信 希望本文内容对您有用 支付宝 支付宝赞赏 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |