网站如何进行网络推广,网站内页制作,网站设计论文题目,顺昌网站建设wzjseo本地有多个音乐文件#xff0c;想用 html 逐个播放#xff0c;或循环播放#xff0c;并设置初始音量。
audio
在 html 中播放音乐文件用 audio 标签#xff1a;
controls 启用控制按钮#xff0c;如进度条、播放、音量、速度等。不加不显示任何 widget。autoplay 理应启…本地有多个音乐文件想用 html 逐个播放或循环播放并设置初始音量。
audio
在 html 中播放音乐文件用 audio 标签
controls 启用控制按钮如进度条、播放、音量、速度等。不加不显示任何 widget。autoplay 理应启用自动播放但浏览器似乎禁止自动播放故目前没什么用。muted 静音。
!DOCTYPE html
html
bodyaudio controls autoplaysource srcC:/Users/tom/Music/Wonderful U - 张含韵.mp3 typeaudio/mpegFailed.
/audiobr/audio controls mutedsource srcC:/Users/tom/Music/Sacred Play Secret Place - Matryoshka.m4a typeaudio/x-m4aFailed.
/audio/body
/htmlSet Volume Automatically
想在打开 html 文件时自动设置某个音量如 20%而不是默认的最大声、或 muted 静音。用到 javascript
class 标记需要调音量的 audio在 script 内用 javascript 选中这些 audio并设置其音量。
!DOCTYPE html
body
!-- 用 a 标记需要自动校音量的 audio --
audio classa controlssource srcC:/Users/tom/Music/Wonderful U - 张含韵.mp3 typeaudio/mpegFailed.
/audio
br/
audio classa controlssource srcC:/Users/tom/Music/Sacred Play Secret Place - Matryoshka.m4a typeaudio/x-m4aFailed.
/audioscript// 添加事件加载时自动执行document.addEventListener(DOMContentLoaded, function() {var audioPlayers document.querySelectorAll(.a); // 根据 a 选 audio 元素audioPlayers.forEach(function(player) {player.volume 0.2; // set initial volume});});
/script
/body
/htmlPlay a List
有多个音乐文件想顺序或循环播放它们同样用 javascript 函数控制。
浏览器可能禁止未有交互就自动播放故一开头要手动点播放但后面可连播。
!DOCTYPE html
body
!-- 放一个空 audio 元素 --
audio idauto-audio controls autoplay/audioscriptconst path C:/Users/tom/Music/; // 音乐文件都在这个目录下const playlist [嗵嗵 - DOUDOU.mp3,我拿什么留住你 - FloruitShow 福禄寿.mp3,琢磨 - 许靖韵.mp3];let currentTrack 0; // 目前播放的文件下标const audioPlayer document.getElementById(auto-audio);// 播放函数function playTrack(index) {audioPlayer.src path playlist[index]; // 完整路径audioPlayer.volume 0.2; // 校音量audioPlayer.play().catch(error {console.log(%cAutoplay prevented:, color: red;, error);});}// 加载时执行document.addEventListener(DOMContentLoaded, function() {// 播放第一首可能被浏览器阻止自动播放而失败playTrack(currentTrack);// 添加事件播放结束后自动放下一首audioPlayer.addEventListener(ended, function () {// 顺序播放if (currentTrack playlist.length) {playTrack(currentTrack);}// 循环播放// currentTrack (currentTrack 1) % playlist.length;// playTrack(currentTrack);});});
/script
/body
/htmlReferences
html用css grid实现自适应四宫格放视频
