我无法使用方法 var audio=new Audio(“Audio track”); 播放音频音频播放（）
[英]I can't play audio using the method var audio=new Audio(“Audio track”); audio.play()
问题描述
So I'm new to java script and whenever i'm trying to play an audio file using Java Script i get the error saying that:
所以我是 java 脚本的新手，每当我尝试使用 Java 脚本播放音频文件时，我都会收到错误消息：
- Failed to load resource: net::ERR_FILE_NOT_FOUND加载资源失败：net::ERR_FILE_NOT_FOUND
- Uncaught (in promise) DOMException: Failed to load because no supported source was found. Uncaught (in promise) DOMException: 加载失败，因为没有找到支持的源。
Please if someone can help me.请如果有人可以帮助我。 My java script file is as below.我的 java 脚本文件如下。
for (var i = 0; i < document.querySelectorAll(".drum").length; i++) {
document.querySelectorAll(".drum")[i].addEventListener("click", function() {
var audio = new Audio("C:\Users\User\Web_Developement\Drum Kit\sounds\crash.mp3");
audio.play();
})
}
And also my index.html file.还有我的 index.html 文件。
<head>
<meta charset="utf-8">
<title>Drum Kit</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
</head>
<body>
<h1 id="title">Drum 🥁 Kit</h1>
<div class="set">
<button class="w drum">w</button>
<button class="a drum">a</button>
<button class="s drum">s</button>
<button class="d drum">d</button>
<button class="j drum">j</button>
<button class="k drum">k</button>
<button class="l drum">l</button>
</div>
<footer>
Made with ❤️ in London.
</footer>
</body>
<script src="C:\Users\User\Web_Developement\Drum Kit\index.js" charset="utf-8"></script>
</html>
1 个解决方案
解决方案1
1 2020-07-08 13:25:55
Using the relative path to the audio source file worked for me:使用音频源文件的相对路径对我有用：
for (var i = 0; i < document.querySelectorAll(".drum").length; i++) {
document.querySelectorAll(".drum")[i].addEventListener("click", function() {
var audio = new Audio("sounds/crash.mp3");
audio.play();
})
}
This is because a javascript instance running in the browser isn't meant to access the user's local files.这是因为在浏览器中运行的 javascript 实例并不意味着访问用户的本地文件。 You can avoid this kind of error by running your website from a local webserver to make a proper separation of server side files and client side files when testing and trying to use only relative paths.您可以通过从本地网络服务器运行您的网站来避免此类错误，以便在测试和尝试仅使用相对路径时正确分离服务器端文件和客户端文件。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.