[英]How to stream mp3 file from a SQL Server database in ASP.NET MVC C#
如何將mp3文件從SQL Server數據庫流式傳輸到C#中的ASP.NET MVC視圖?
我能夠從數據庫中成功檢索文件,但是我不知道需要將哪些數據傳遞給視圖以及需要設置哪些屬性。 我嘗試在視圖中使用數據源,但是在運行該應用程序時仍然得到“找不到文件”。
我不確定數據源應該是什么。 當我將數據源設置為本地mp3文件的路徑時,它可以正常工作。
當我運行該應用程序時,出現“找不到文件”
ASP.NET MVC控制器:
using (SqlDataReader dr = cmd.ExecuteReader())
{
while (dr.Read())
{
var mp3 = new Mp3Files
{
DATA = (Byte[])dr["DATA"],
DATASCOURCE = dr
};
list.Add(mp3);
}
foreach (var item in list)
{
Mp3FilesList.Add(item);
}
return View("Loops", "_Layout", Mp3FilesList);
}
視圖:
<div data-thumb="Scripts/img/adg3.jpg" data-type="audio"
class="audioplayer-tobe skin-wave "
data-source="@item.DATASCOURCE" data-
scrubbg="../Scripts/waves2/adg3_mp3.png" data-
scrubprog="Scripts/waves2/wavesprog.png" data-
playfrom="last">
Mp3Files
類:
{
public int AUDIO_ID { get; set; }
public string NAME { get; set; }
public string CONTENT_TYPE { get; set; }
public string BPM { get; set; }
public string CATEGORY { get; set; }
public Byte[] DATA { get; set; }
public DbDataReader DATASCOURCE { get; set; }
}
我知道這篇文章已經很老了,但是由於有人可能會在Google研究之后來到這里,所以我將分享解決方法。
您有兩種選擇:通過MVC(如果要在頁面中包含很多聲音,則不友好)或JQuery(例如,可以創建加載動畫以向用戶提供友好的等待消息或微調框)。
選項1-MVC ( 我用過您的View(循環)的名稱和您發布的代碼 ):
public ActionResult Loops()
{
PageViewModel result = new PageViewModel();
IDataReader dr = null; // some SQL Search
result.Files = new List<Mp3File>();
while (dr.Read())
{
result.Files.Add(new Mp3File()
{
Id = int.Parse(dr["Id"].ToString()),
Name = dr["Name"].ToString(),
ContentType = dr["ContentType"].ToString(), //must be something like audio/mp3 for example
Category = dr["Category"].ToString(),
Data = (Byte[])dr["Data"]
});
}
return Json(result, JsonRequestBehavior.AllowGet);
}
然后,在CSHTML文件中,循環瀏覽ViewModel的files屬性,並將數據指向音頻HTML元素的源:
if (Model.Files?.Count > 0)
{
<div class="list">
@for (var i = 0; i < Model.Files.Count; i++)
{
<!-- AUDIO ITEM -->
<label class="item">
<span class="title"><i class="far fa-file-audio"></i> @Model.Files[i].Name</span>
<audio controls>
<source src="@Model.Files[i].Data" type="@Model.Files[i].ContentType" />
</audio>
</label>
}
</div>
}
jQuery解決方案 :我個人認為,此選項更好,因為它更加用戶友好並且不會導致長時間的等待白頁:
1)盡可能將文件存儲在Web服務器中,因為加載過程會更快;
2)在控制器中創建一個HTTP Get方法
[HttpGet]
public ActionResult GetFiles()
{
PageViewModel result = new PageViewModel();
IDataReader dr = null; // some SQL Search
result.Files = new List<Mp3File>();
while (dr.Read())
{
result.Files.Add(new Mp3File()
{
Id = int.Parse(dr["Id"].ToString()),
Name = dr["Name"].ToString(),
ContentType = dr["ContentType"].ToString(), //must be something like audio/mp3 for example
Category = dr["Category"].ToString(),
Data = (Byte[])dr["Data"],
Url = $"{Request.Url.GetLeftPart(UriPartial.Authority)}/assets/audio/{Path.GetFileNameWithoutExtension(dr["Name"].ToString())}.mp3" //in case you stored your file in your web server
});
}
return Json(result, JsonRequestBehavior.AllowGet);
}
3)在CSTHML頁面中創建一個JavaScript函數,該函數將加載文件
//In this example I'm using local JS for JQuery and Bootstrap. But you can use the way you prefer (CDN or NPM for example)
<!-- SCRIPTS -->
<script src="~/assets/js/jquery-3.3.1.slim.min.js"></script>
<script src="~/assets/js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
loadFiles();
});
function loadFiles() {
//here I'm referencing a DIV tag that uses the spinner.js has the following content:
$("#spinner").show();
//<div class="wrapper-loading" id="spinner" style="display:none;">
// <span class="spinner-double-section-far"></span>
//</div>
$.ajax({
async: true,
url: "GetFiles",
cache: false,
dataType: "json",
success: function (data) {
$("#spinner").hide(); //stop spinner
if (data) {
$("#audioContainer").show();
data.Files.forEach(audio => {
var newAudio = '<label class="item">';
newAudio += '<span class="title"><i class="far fa-file-audio"></i>' + audio.Name + '</span>';
newAudio += '<audio controls><source src="' + audio.Url + '" type="audio/mp3"/>';
newAudio += '</audio></label>';
$("#audioContainer").append(newAudio); //JQuery command to insert new HTML into some Element
});
}
},
error: function (error) {
$("#spinner").hide(); //stop spinner
alert(JSON.stringify(error));
}
});
}
</script>
這就是我需要使用標准AUDIO HTML控件在頁面中放入一些音頻文件的標准,該控件具有嵌入式控件,如播放,暫停等。
祝您好運,希望對您有所幫助。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.