Question

我是node.js的新手，我正试图让我的页面在buttonclick上播放一首歌。问题是歌曲没有播放，我不确定是否所有内容都以正确的方式通过。

我在我的控制台中得到的是该页面正在尝试获取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>

我不确定我是否可以在ejs中使用<script>标签？歌曲在主文件夹中，它们被称为1.mp3,2 .mp3等。

提前致谢，

托马斯

Answer 1

您的服务器配置如下：

app.use(express.static(path.join(__dirname, 'public')));

您在问题中说明：

歌曲在主文件夹

如果“主文件夹”是指app.js所在的文件夹，则可能无法找到MP3文件，因为您已告知静态中间件要查找它们一个名为public/的目录（相对于主文件夹）。

将MP3文件移至public/，然后重试。

函数在ejs中，变量传递给HTML

1 个答案: