【发布时间】：2018-12-16 20:45:30
【问题描述】：
背景
我一直在从事一个个人项目，创建一个媒体播放器/组织器，该媒体播放器/组织器配备了音乐库、导入和播放列表功能，用户可以根据自己的需要自定义和添加这些功能。
问题
在这个项目中，我来到了应用程序最关键的部分，我想列出用户导入到他们的库中的所有歌曲和/或允许播放这些歌曲的播放列表。 我遇到了下面的帖子，这正是我面临的问题，但是我没有看到关于如何解决这个问题的明确解释，为什么我要创建这个帖子。
引用帖子的链接：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
- 播放列表标题页面显示所有播放列表的列表
用户创建了详细信息按钮，将他们带到其
内容 - 播放列表内容页面显示播放列表中的所有歌曲 选择，我试图让用户能够暂停， 通过使用 音频标签控件（或根据需要使用其他形式的控件）
注意：应用程序远未完成，因此请忽略所有名称不佳的列等。
决赛
如果有人需要进一步说明，请告诉我，我可以详细说明，欢迎提出所有建议。
提前致谢！
【问题讨论】：
标签： c# asp.net asp.net-mvc razor html5-audio