javascript - ejs 中的函数,变量传递到 HTML

标签 javascript function ejs

我是 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/

相关文章:

javascript - 我的网络应用程序正在复制用户输入以进行发布,除非刷新页面进行删除,否则不会显示用户已删除

javascript - 在 Javascript ES6 中使用 Chai(或 Should)断言数组(使用 Babel)

javascript - 为什么在 JavaScript 中,如果有一个方法 ReplaceAll() 可能会更好?

function - 从高维函数采样

python - 将参数列表传递给 Python 函数

javascript - Rivets.js 属性取决于几个字段

javascript - 为什么这里使用 jQuery 语法?

javascript - 带重定向的 AngularJS 路由

powershell - 匿名递归函数

javascript - ejs 函数不断插入不需要的新行