Question

背景

我一直在从事一个个人项目，创建一个配有音乐库，导入和播放列表功能的媒体播放器/组织器，用户可以根据自己的需求进行自定义和添加。

问题

在这个项目中，我进入了应用程序的最关键部分，在这里我想列出用户已导入到其库中的所有歌曲和/或播放列表，以便播放这些歌曲。我碰到了以下帖子，这正是我所面临的问题，但是我没有看到关于如何依次解决此问题的清晰解释。

链接到引用的帖子：Using .Net MVC, how can I list multiple html audio players that play different files?

我曾用此帖子播放一个音频文件，但是我仍然无法使用它来播放多个音频文件。

代码

在下面，您可以在播放列表视图中查看我的所有尝试，并尝试并允许播放列表中的所有歌曲均可播放。似乎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; }
    }

最终目标

仅是为了更好地传达我想要达到的目的，下面显示了指向图像的链接，这些图像显示了播放列表功能所涉及的播放列表标题和播放列表内容页面。

链接：https://imgur.com/a/2gqxiMv

播放列表标题页显示了所有播放列表的列表
用户使用详细信息按钮创建的内容将其带到其
内容
播放列表内容页面显示播放列表中的所有歌曲选择，我正在尝试让用户可以暂停，播放，更改此页面中任何歌曲的音量等，方法是使用音频标签控件（或在需要时使用其他形式的控件）

注意：该应用程序尚未完成，因此请忽略所有名称不正确的列等。

最终评论

如果有人需要进一步澄清，请让我知道，我可以详细说明，我们欢迎所有建议。

谢谢！

Answer 1

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

@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音频播放器，每个播放器播放不同的文件？

1 个答案: