Html5播放本地音乐视频

最新推荐文章于 2025-03-06 10:54:22 发布

程序之雅

最新推荐文章于 2025-03-06 10:54:22 发布

阅读量1.3k

点赞数 3

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/strugglesmen/article/details/109388064

版权

JavaScript 专栏收录该内容

1 篇文章

订阅专栏

这段代码演示了如何使用HTML5的`<audio>`标签和JavaScript处理用户选择的音频文件，实现文件选择后的立即播放功能。当用户选择文件后，文件URL会被转换为对象URL，并设置为音频元素的源，从而实现音频的播放。如果替换为`<video>`标签，此方法同样适用于视频文件的播放。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接上代码，代码很简单，需要选择一个声音音乐文件

document.getElementById("file").addEventListener("change",function () {
        var file = document.getElementById('file').files[0];
		var url = URL.createObjectURL(file);
		console.log(url);
		document.getElementById("audio_id").src = url;
});

完整代码

<html>
<body>
<input type="file" id="file">
<audio id="audio_id" controls autoplay loop>Your browser can't support HTML5 Audio</audio>
<script>

document.getElementById("file").addEventListener("change",function () {
        var file = document.getElementById('file').files[0];
		var url = URL.createObjectURL(file);
		console.log(url);
		document.getElementById("audio_id").src = url;
});
</script>
</body>
</html>

以上是音频文件，如果是视频，将上面audio 改成 video 标签即可

<video id="audio_id" controls autoplay loop>Your browser can't support HTML5 Audio</video>