使用.Net MVC，我如何列出多个播放不同文件的HTML音频播放器? [英] Using .Net MVC, how can I list multiple html audio players that play different files?
问题描述
我和我的朋友正在使用.Net进行大学项目.我们正在尝试建立一个网站，允许用户以类似于Soundcloud之类的方式收听音频剪辑. 目前，我们有一个基本的MVC站点，该站点允许用户将音频上传到服务器文件系统上，并将有关文件的各种详细信息记录在数据库表中.
My friend and I are working on a college project using .Net. We're trying to build a website that allows users to listen to audio clips in a similar manner to sites like Soundcloud. At the moment we have a basic MVC site that allows users to upload audio onto the server file system, and records various details about the file in a database table.
因此，现在我尝试向客户端显示可用音频文件和播放每个文件的控件的列表.我特别希望为每个文件使用不同的控件集；在项目的后面，我们也打算为每个文件添加波形图像.
So now I'm trying to present the client with a list of available audio files and controls to play each file. I specifically want a different set of controls for each file; later in the project we intend to add waveform images for each file too.
经过一番研究，我发现此stackoverflow帖子帮助我播放和播放单个音频服务器上的文件，但是，我无法将此文件与多个mp3一起使用. 在上面的帖子中，控制器将文件返回到网页，然后在空网页中播放该文件.我在控制器中对此进行了测试，首先使用Server.PathMap，然后将绝对路径作为File方法的参数返回，如下所示:
After some research I found this stackoverflow post which helped me serve and play a single audio file from the server, however, I can't get this to work with multiple mp3s. In the above post the controller returns a file to the web page which is then played in an empty web page. I tested this in my controller, first using Server.PathMap, then returning the absolute path as a parameter of the File method as below:
public ActionResult Index()
{
var file = Server.MapPath("~/App_Data/Audio/09 - Supergrass - Cheapskate.mp3");
return File(@"c:\users\paul\documents\visual studio 2013\Projects\Web Applications Project\MVCTest2\App_Data\Audio\05. Debaser.mp3", "audio/mp3");
}
两个都很好.然后，我考虑了如何使用文件列表进行此操作，但是我还没有运气.
Both worked fine. I then considered how to do this with a list of files, but I've not had any luck yet.
我的数据库表包含有关音频文件的以下信息:
My database table contains the following information about the audio files:
- 唯一ID(int)
- 文件名
- 绝对文件路径
- 用户ID
在我发现的示例中调用的File方法将FilePathResult返回给客户端.我试图用FilePathResult替换数据库中的绝对路径列，但是它不起作用.我收到一个错误信息，说'System.Web.Mvc.FilePathResult' has no parameterless constructor类.我是否认为这个错误意味着我需要从数据库调用参数时将参数传递到FilePathResult中，这是正确的吗?
The File method called in the example I found returns a FilePathResult to the client. I have tried to replace the absolute path column in the database with FilePathResult instead, but it doesn't work. I get an error saying The class 'System.Web.Mvc.FilePathResult' has no parameterless constructor. Am I correct in thinking this error means I need to pass parameters into the FilePathResult as I call it from the database maybe?
无论如何，我放弃了这一行动方针，而是寻找其他方法来将正确的路径引入元素，但是我没有取得任何成功.
In any case, I abandoned that course of action and looked for other ways to get the correct path into the element, but I haven't had any success.
我理解在另一个示例中它是如何工作的，因为它只有一个音频结果要返回，因此对Index()的简单调用就可以返回该单个结果. 这是附带的播放器的外观，但是它们不起作用，而且当我检查元素时，是因为它指向绝对路径:
I understand how it works in the other example, as it only has one audio result to return, so a simple call to Index() can return that single result. This is what it looks like with the players included, but they don't work, and when I inspect the elements, it's because it's pointing to the absolute paths:
这是标记的样子:
<tr>
<td>
02 - Supergrass - Richard III.mp3
</td>
<td>
<article class="audio">
<audio controls>
<source src="/AudioClip/http%3a/localhost/50279/App_Data/Audio/02%20-%20Supergrass%20-%20Richard%20III.mp3" type="audio/mp3" />
<p>Your browser does not support HTML 5 audio element</p>
</audio>
</article>
</td>
<td>
http://localhost/50279/App_Data/Audio/02 - Supergrass - Richard III.mp3
</td>
<td>
1
</td>
<td>
0
</td>
<td>
<a href="/AudioClip/Edit/20">Edit</a> |
<a href="/AudioClip/Details/20">Details</a> |
<a href="/AudioClip/Delete/20">Delete</a>
</td>
</tr>
这是我的AudioClipController的相关部分:
Here's the relevant parts of my AudioClipController:
namespace MVCTest2.Controllers
{
public class AudioClipController : Controller
{
//
// GET: /AudioClip/
string audioFilePath = "~/App_Data/Audio";
AudioDb _db = new AudioDb();
public ActionResult Index(string searchTerm = null)
{
var model =
_db.AudioClips
.OrderBy(r => r.Title)
.Where(r => searchTerm == null || r.Title.StartsWith(searchTerm))
.Take(10)
.Select(r => r);
return View(model);
}
//
// GET: /AudioClip/Details/5
public ActionResult Details(int id)
{
return View();
}
//
// GET: /AudioClip/Create
[HttpGet]
public ActionResult Create()
{
return View("Create");
}
//
// POST: /AudioClip/Create
[HttpPost]
public ActionResult Create(HttpPostedFileBase file) //FormCollection collection
{
// Verify that the user selected a file
if (file != null && file.ContentLength > 0)
{
// extract only the fielname
var fileName = Path.GetFileName(file.FileName);
// store the file inside ~/App_Data/uploads folder
var path = Path.Combine(Server.MapPath(audioFilePath), fileName);
file.SaveAs(path);
AudioClip audioClip = new AudioClip(fileName, path, 1, 0);
_db.AudioClips.Add(audioClip);
_db.SaveChanges();
return RedirectToAction("INDEX", new { Id = audioClip.AudioClipId });
}
// redirect back to the index action to show the form once again
return RedirectToAction("Index");
}
我的AudioClip模型:
My AudioClip model:
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MVCTest2.Models
{
public class AudioClip
{
[Display(Name="ID")]
public int AudioClipId { get; set; }
[Display(Name = "Clip Title")]
public string Title { get; set; }
[Display(Name = "File Path")]
public string FilePath { get;set; }
[Display(Name = "User Name")]
public int BloggerId { get; set; }
[Display(Name = "Linked To")]
public int MasterId { get; set; }
// the virtual keyword issues a second query to solve null
// pointer at AudioClip.Comments. There are multiple ways to do this
// including more efficent ones, see:
// Loading Related Entities: http://msdn.microsoft.com/en-US/data/jj574232
public virtual ICollection<Comment> Comments { get; set; }
public AudioClip() {
}
public AudioClip(string title, string filePath, int bloggerId, int masterId) {
Title = title;
FilePath = filePath;
BloggerId = bloggerId;
MasterId = masterId;
}
}
}
以及我的AudioClip Index视图:
And my AudioClip Index view:
@model IEnumerable<MVCTest2.Models.AudioClip>
@{
ViewBag.Title = "Index";
}
<h2>Audio Clips</h2>
<form method="get">
<input type="search" name="searchTerm" />
<input type="submit" value="Search by Name" />
</form>
<p>
@Html.ActionLink("Create New", "Create")
</p>
<table>
<tr>
<th>
@Html.DisplayNameFor(model => model.Title)
</th>
<th>
@Html.DisplayNameFor(model => model.FilePath)
</th>
<th>
@Html.DisplayNameFor(model => model.BloggerId)
</th>
<th>
@Html.DisplayNameFor(model => model.MasterId)
</th>
<th></th>
</tr>
@foreach (var item in Model) {
<tr>
<td>
@Html.DisplayFor(modelItem => item.Title)
</td>
<td>
<article class="audio">
<audio controls>
<source src="@Url.Action(item.FilePath)" type="audio/mp3" />
<p>Your browser does not support HTML 5 audio element</p>
</audio>
</article>
</td>
<td>
@Html.DisplayFor(modelItem => item.FilePath)
</td>
<td>
@Html.DisplayFor(modelItem => item.BloggerId)
</td>
<td>
@Html.DisplayFor(modelItem => item.MasterId)
</td>
<td>
@Html.ActionLink("Edit", "Edit", new { id=item.AudioClipId }) |
@Html.ActionLink("Details", "Details", new { id=item.AudioClipId }) |
@Html.ActionLink("Delete", "Delete", new { id=item.AudioClipId })
</td>
</tr>
}
</table>
我想我必须能够将此信息添加到AudioClip模型和数据库中，以便允许我生成多个播放不同文件的音频播放器，但现在看不到它.你们中的任何人都能指出我正确的方向吗?
I'm thinking I must be able to add this information to the AudioClip model and the database in order to allow me to generate multiple audio players that play different files, but right now I can't see it. Can any of you point me in the right direction?
推荐答案
我想到的一个简单的逻辑解决方案是，如果使用服务器上文件的绝对路径(C:\ files \ media.mp3)，应该使用文件的URL，并将其分配给您的播放器.
The simple logical solution comes to my mind is, instead if using the absolute path of the file on the server (C:\files\media.mp3) you should use the URL of the file and assign it to your player.
以下有关音频标签的链接说明了如何将其与音频文件URL一起使用. http://www.w3schools.com/tags/tag_audio.asp
Following link about audio tag explains about using it with audio file URL. http://www.w3schools.com/tags/tag_audio.asp
您应该考虑仅将文件URL而不是FileContentResult返回给客户端.
You should consider returning only file URL to the client instead of the FileContentResult.
感谢和问候， 赤丹·兰帕里亚(Chetan Ranpariya)
Thanks and regards, Chetan Ranpariya
这篇关于使用.Net MVC，我如何列出多个播放不同文件的HTML音频播放器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
