我是 node.js 新手,我正在尝试让我的页面在单击按钮时播放歌曲。 问题是歌曲无法播放,我不确定一切是否都以正确的方式传递。
我在控制台中得到的是该页面正在尝试获取 xxx.mp3,但给出了 404。
<!DOCTYPE html>
<html>
<head>
<title><%= title%></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<script>
function playIt(song)
{
document.getElementById("embed").innerHTML="<audio src=\""+song+".mp3\" autoplay> <embed src=\""+song+".mp3\" hidden=\"true\" /> </audio>";
return true;
}
</script>
<body>
<% include templates/header.ejs %>
<h1><%= title%></h1>
<h3><%= muziek.Artist%> - <%= muziek.Album %></h3>
<div class="CSS_Table_Example" style="width:600px;height:720px;">
<table>
<tr>
<td width="20px"><h4>Nr</h4></td>
<td width="110px"><h4>Title</h4></td>
<td width="100px"><h4>Album</h4></td>
<td width="100px"><h4>Artist</h4></td>
<td width="100px"><h4>Length</h4></td>
<td><h4>Play</h4></td>
</tr>
<tr>
<% muziek.categories.forEach(function(item){ %>
<td width="20px"><%= item.albumNumber %></td>
<td width="150px"><%= item.title %></td>
<td width="100px"><%= item.album %></td>
<td width="100px"><%= item.artist %></td>
<td width="100px"><%= item.length %></td>
<td>
<form action="" method="post">
<button type="button" class="myButton" style="width: 250px" onclick="playIt(<%= item.albumNumber%>)">play <%= item.title%></button>
</form>
</td>
</tr>
<% }); %>
</table>
</div>
<div id="embed"></div>
</body>
</html>
我不确定是否可以使用 <script>
ejs 中的标签?
这些歌曲位于主文件夹中,名称为 1.mp3、2.mp3 等。
提前致谢,
托马斯
最佳答案
您的服务器配置如下:
app.use(express.static(path.join(__dirname, 'public')));
您在问题中陈述:
the songs are in the main folder
如果“主文件夹”指的是 app.js
所在的文件夹,则预计找不到 MP3 文件,因为您已经告诉静态中间件在名为 public/
的目录(相对于主文件夹)中查找它们。
将 MP3 文件移至 public/
并重试。
关于javascript - ejs 中的函数,变量传递到 HTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32286777/