使用 ASP.NET MVC，我如何列出多个 html 音频播放器，每个播放器播放不同的文件？

Question

背景

我一直致力于创建一个媒体 player/organizer 的个人项目，该媒体具有音乐库、导入和播放列表功能，用户可以根据自己的需要自定义和添加这些功能。

问题

在这个项目中，我来到了应用程序最关键的部分，我想列出用户导入到他们的库中的所有歌曲和/或允许播放这些歌曲的播放列表。我遇到了下面的 post 这正是我面临的问题但是我没有看到关于如何解决这个问题的明确解释反过来为什么我要创建这个 post.

Link 到 post 参考：Using .Net MVC, how can I list multiple html audio players that play different files?

我用这个 post 来播放一个音频文件，但是我仍然无法用它来播放多个。

代码

您可以在下面看到我在播放列表视图中所做的所有尝试，以尝试并能够播放播放列表中的所有歌曲。似乎 foreach 循环只是完全跳过音频标签并在加载时呈现一个媒体播放器：

@model IEnumerable<WhizzyMediaOrganiser.Models.Playlist_Contents_MVC>

@{
    ViewBag.Title = "PlaylistContents";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>PlaylistContents</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.SongFilePath)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.HeaderId)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.SongId)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.DateAdded)
        </th>
        <th></th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td>
                @*Not worked*@
                @*<audio controls="controls" preload="auto" src="@item.SongFilePath"></audio>*@

                @*Worked but for only audio file*@
                @*<audio controls="controls" preload="auto" src="@Url.Action("MyAudio")"></audio>*@

                @*Not worked*@
                <article class="audio">
                    <audio controls>
                        <source src="@Url.Action(item.SongFilePath)" type="audio/mp3" />
                    </audio>
                </article>
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.HeaderId)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.SongId)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.DateAdded)
            </td>
            <td>
                @Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
                @Html.ActionLink("Details", "Details", new { id = item.Id }) |
                @Html.ActionLink("Delete", "Delete", new { id = item.Id })
            </td>
        </tr>
    }

</table>

下面是支持控制器中的代码：

public class PlaylistsController : Controller
    {
        IDbRepository rep;

        public PlaylistsController(IDbRepository rep)
        {
            this.rep = rep;
        }

        public PlaylistsController()
        :this(new DbRepository()) { }

        // GET: Playlists/Details/5
        public ActionResult PlaylistContents(int id)
        {
            var dbPlaylistContents = rep.GetPlaylistContentsByHeaderId(id);

            List<Playlist_Contents_MVC> contents = new List<Playlist_Contents_MVC>();
            foreach (var item in dbPlaylistContents)
            {
                var song = rep.GetSongById(item.SONG_ID);
                var songFile = rep.GetSongFileById(song.FILE_ID);
                Playlist_Contents_MVC content = new Playlist_Contents_MVC()
                {
                    Id = id,
                    SongFilePath = songFile.FILE,
                    SongId = item.SONG_ID,
                    DateAdded = item.DATE_ADDED,
                    HeaderId = item.HEADER_ID
                };

                contents.Add(content);
            }

            return View(contents);
        }

        //Action called by single audio file attempt
        public ActionResult MyAudio()
        {
            var file = Server.MapPath("~\SongFiles\benny_blanco_Halsey_Khalid_–_Eastside_official_video_.mp3");
            return File(file, "audio/mp3");
        }

下面是Playlist_Contents_MVC模型（视图所基于的模型）：

public partial class Playlist_Contents_MVC
    {
        public string SongFilePath { get; set; }
        public int Id { get; set; }
        public int SongId { get; set; }
        public int HeaderId { get; set; }
        public DateTime DateAdded { get; set; }
    }

最终目标

为了更有助于传达我想要实现的目标，下面显示了一个 link 到显示播放列表 headers 的图像和涉及播放列表功能的播放列表内容页面。

Link: https://imgur.com/a/2gqxiMv

播放列表headers页面显示
所有播放列表的列表用户创建了详细信息按钮，将他们带到其
内容
播放列表内容页面显示播放列表中的所有歌曲选中并且我试图让用户能够暂停，使用音频标签控件（或根据需要使用其他形式的控件）

注意：该应用程序远未完成，因此请忽略所有命名不当的列等。

最终评论

如果有人需要进一步说明，请告诉我，我可以详细说明，欢迎提出所有建议。

提前致谢！

Answer 1

您可以像这样更改 HTML 的每个部分：

@foreach (var item in Model)
{
    <tr>
        <td>                
            <article class="audio">
                <audio controls>
                    <source src="@item.SongFilePath" id="@item.Id" type="audio/mp3" />
                </audio>
            </article>
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.HeaderId)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.SongId)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.DateAdded)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
            @Html.ActionLink("Details", "Details", new { id = item.Id }) |
            @Html.ActionLink("Delete", "Delete", new { id = item.Id })
        </td>
    </tr>
}

同样在控制器中，你不应该传递“文件”，传递服务器上的“文件位置”就足够了（文件的URL）。

请检查代码。如果有更多信息，请告诉我。

更新：

让我解释得更清楚。我把这个项目作为样本。让我们看看这个。这是 HTML 部分：

@model IEnumerable<WebApplication1.Models.Playlist_Contents_MVC>


<h2>PlaylistContents</h2>

<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.SongFilePath)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.HeaderId)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.SongId)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.DateAdded)
        </th>
        <th></th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td> 
                <article class="audio">
                    <audio controls>
                        <source src="@item.SongFilePath" id="@item.Id" type="audio/mp3" />
                    </audio>
                </article>
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.HeaderId)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.SongId)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.DateAdded)
            </td>
            <td>
                @Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
                @Html.ActionLink("Details", "Details", new { id = item.Id }) |
                @Html.ActionLink("Delete", "Delete", new { id = item.Id })
            </td>
        </tr>
    }

</table>

这些代码是我的控制器：

public ActionResult Index()
    {
        List<Playlist_Contents_MVC> model = new List<Playlist_Contents_MVC>();
        model.Add(new Playlist_Contents_MVC() { DateAdded = DateTime.Now, HeaderId = 1, Id = 1, SongId = 1, SongFilePath = "/mp3FolderOnServer/1.mp3" });
        model.Add(new Playlist_Contents_MVC() { DateAdded = DateTime.Now, HeaderId = 2, Id = 2, SongId = 2, SongFilePath = "/mp3FolderOnServer/2.mp3" });
        model.Add(new Playlist_Contents_MVC() { DateAdded = DateTime.Now, HeaderId = 3, Id = 3, SongId = 3, SongFilePath = "/mp3FolderOnServer/3.mp3" });
        model.Add(new Playlist_Contents_MVC() { DateAdded = DateTime.Now, HeaderId = 4, Id = 4, SongId = 4, SongFilePath = "/mp3FolderOnServer/4.mp3" });
        model.Add(new Playlist_Contents_MVC() { DateAdded = DateTime.Now, HeaderId = 5, Id = 5, SongId = 5, SongFilePath = "/mp3FolderOnServer/5.mp3" });
        return View(model);
    }

最后是结果：

它对我有用。请注意，我用样本数据填充了我的模型。您应该用数据库中的数据填充它。我认为您的文件路径不正确。查看我的文件路径，它来自服务器位置。

使用 ASP.NET MVC，我如何列出多个 html 音频播放器，每个播放器播放不同的文件？

Using ASP.NET MVC, how can I list multiple html audio players that each play a different file?

c#

asp.net

asp.net-mvc

razor

html5-audio