html播放本地音乐

本地有多个音乐文件,想用 html 逐个播放,或循环播放,并设置初始音量。

audio

在 html 中播放音乐文件用 audio 标签:

  • controls 启用控制按钮,如进度条、播放、音量、速度等。不加不显示任何 widget。
  • autoplay 理应启用自动播放,但浏览器似乎禁止自动播放,故目前没什么用。
  • muted 静音。
html 复制代码
<!DOCTYPE html>
<html>
<body>

<audio controls autoplay>
	<source src="C:/Users/tom/Music/Wonderful U - 张含韵.mp3" type="audio/mpeg">
	Failed.
</audio>

<br/>

<audio controls muted>
	<source src="C:/Users/tom/Music/Sacred Play Secret Place - Matryoshka.m4a" type="audio/x-m4a">
	Failed.
</audio>

</body>
</html>

Set Volume Automatically

想在打开 html 文件时,自动设置某个音量,如 20%,而不是默认的最大声、或 muted 静音。用到 javascript:

  • class 标记需要调音量的 audio;
  • script 内用 javascript 选中这些 audio,并设置其音量。
html 复制代码
<!DOCTYPE html>
<body>
<!-- 用 `a` 标记需要自动校音量的 audio -->
<audio class="a" controls>
	<source src="C:/Users/tom/Music/Wonderful U - 张含韵.mp3" type="audio/mpeg">
	Failed.
</audio>
<br/>
<audio class="a" controls>
	<source src="C:/Users/tom/Music/Sacred Play Secret Place - Matryoshka.m4a" type="audio/x-m4a">
	Failed.
</audio>


<script>
	// 添加事件:加载时自动执行
	document.addEventListener("DOMContentLoaded", function() {
		var audioPlayers = document.querySelectorAll('.a'); // 根据 `a` 选 audio 元素
		audioPlayers.forEach(function(player) {
			player.volume = 0.2; // set initial volume
		});
	});
</script>
</body>
</html>

Play a List

有多个音乐文件,想顺序或循环播放它们,同样用 javascript 函数控制。

  • 浏览器可能禁止未有交互就自动播放,故一开头要手动点播放,但后面可连播。
html 复制代码
<!DOCTYPE html>
<body>
<!-- 放一个空 audio 元素 -->
<audio id="auto-audio" controls autoplay></audio>

<script>
	const 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>
</html>

References

  1. html用css grid实现自适应四宫格放视频
相关推荐
Nan_Shu_6143 小时前
学习:uniapp全栈微信小程序vue3后台(28)
前端·学习·微信小程序·小程序·uni-app
珍宝商店3 小时前
原生 JavaScript 方法实战指南
开发语言·前端·javascript
蓝莓味的口香糖4 小时前
【企业微信】VUE项目在企微中自定义转发内容
前端·vue.js·企业微信
IT_陈寒4 小时前
告别低效!用这5个Python技巧让你的数据处理速度提升300% 🚀
前端·人工智能·后端
—Qeyser4 小时前
Laravel + UniApp AES加密/解密
前端·uni-app·laravel
C++chaofan4 小时前
游标查询在对话历史场景下的独特优势
java·前端·javascript·数据库·spring boot
cg.family4 小时前
Vue3 v-slot 详解与示例
前端·javascript·vue.js
FreeBuf_4 小时前
新型域名前置攻击利用Google Meet、YouTube、Chrome及GCP构建流量隧道
前端·chrome
c0detrend4 小时前
技术架构设计:如何打造一个高性能的Chrome截图插件
前端·chrome
幽络源小助理4 小时前
8、幽络源微服务项目实战:前端登录跨域同源策略处理+axios封装+权限的递归查询增删改+鉴权测试
前端·微服务·架构