Фон
Я работаю над личным проектом по созданию медиаплеера / органайзера, оснащенного музыкальной библиотекой, функциями импорта и воспроизведения, которые пользователи могут настраивать и добавлять на основе своихнеобходимо.
Issue
В рамках этого проекта я подошел к самой важной части приложения, где я хочу перечислить все песни, которые пользователь импортировал в свою библиотеку, иили списки воспроизведения, позволяющие воспроизводить их.Я наткнулся на следующий пост, который является именно той проблемой, с которой я столкнулся, однако я не вижу четкого объяснения того, как решить эту проблему, в свою очередь, почему я создаю этот пост.
Ссылка на ссылку, на которую ссылаются: Используя .Net MVC, как я могу перечислить несколько html-аудиоплееров, которые воспроизводят разные файлы?
Я использовал этот пост для воспроизведения одного аудиофайла, однако я все еще не могу использовать его для воспроизведения нескольких файлов.
Код
Ниже вы можете увидеть все мои попытки в представлении списка воспроизведения, чтобы попытаться разрешить воспроизведение всех песен в списке воспроизведения.Кажется, что цикл 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
- На странице заголовков списка воспроизведения отображается список всех списков воспроизведения, которые
создал пользователь с помощью кнопки сведений, переводя их в
содержимое - На страницах содержимого списка воспроизведения показаны все песни в выбранном списке воспроизведения, и я пытаюсь дать пользователям возможность приостановить, воспроизвести, изменить громкость и т. д. любой песни на этой странице с помощьюэлементы управления звуковыми тегами (или, при необходимости, использование другой формы элементов управления)
Примечание: приложение еще далеко не завершено, поэтому игнорируйте все плохо названные столбцы и т. д.
Заключительные комментарии
Если кому-то нужно больше разъяснений, пожалуйста, дайте мне знать, и я могу уточнить, и все предложения приветствуются.
Заранее спасибо!