Làm sao để phát tệp file mp3 từ server SQL bằng html5 và asp.net

_Mình có up tệp mp3 lên sql sever
cơ sở dữ liệu đây ạ
Capture


Upload file lên vẫn bình thường nhưng khi mình gọi dữ liệu để trả về hiển thị trên web thì cái tệp mp3 không chạy được mình dùng tag audio html5
123

html5 audio thì có src mình dùng Generic Handler để trả về tệp mp3 thông qua định dạng Binary nhưng vẫn nhạc vẫn không phát =))

tệp FileCS.ashx :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.IO;
using System.Configuration;
using System.Data.SqlClient;

namespace testmusic
{
   
    public class Handler1 : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            int id = int.Parse(context.Request.QueryString["id"]);
            byte[] bytes;
            string contentType;
            string strConnString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
            string name;
            using (SqlConnection con = new SqlConnection(strConnString))
            {
                using (SqlCommand cmd = new SqlCommand())
                {
                    cmd.CommandText = "SELECT Name, Data, ContentType FROM tblfile WHERE Id=@Id";
                    cmd.Parameters.AddWithValue("@Id", id);
                    cmd.Connection = con;
                    con.Open();
                    SqlDataReader sdr = cmd.ExecuteReader();
                    sdr.Read();
                    bytes = (byte[])sdr["Data"];
                    contentType = sdr["ContentType"].ToString();
                    name = sdr["Name"].ToString();
                    con.Close();
                }
            }
            context.Response.Clear();
            context.Response.Buffer = true;
            context.Response.AppendHeader("Content-Disposition", "attachment; filename=" + name);
            context.Response.ContentType = contentType;
            context.Response.BinaryWrite(bytes);
            context.Response.End();
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

tệp index.asp:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="testmusic.index" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    
</head>
<body>
<form id="form1" runat="server">
    <asp:FileUpload ID="FileUpload1" runat="server" />
    <asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" />
    <hr />
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
        <Columns>
            <asp:BoundField DataField="Name" HeaderText="FileName" />
            <asp:TemplateField>
                <ItemTemplate>
                    <audio controls="controls">  
                        <source src='<%# Eval("Id", "~/FileCS.ashx?Id={0}") %>' type = '<%# Eval("ContentType") %>' />  
                    </audio>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:HyperLinkField DataNavigateUrlFields="Id" Text="Download" DataNavigateUrlFormatString="~/FileCS.ashx?Id={0}"
                HeaderText="Download" />
        </Columns>
    </asp:GridView>
    </form>
</body>
</html>

tệp index.asp.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using System.Configuration;
using System.Data.SqlClient;

namespace testmusic
{
    public partial class index : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!this.IsPostBack)
            {
                this.BindGrid();
            }

        }
        protected void btnUpload_Click(object sender, EventArgs e)
        {
            using (BinaryReader br = new BinaryReader(FileUpload1.PostedFile.InputStream))
            {
                byte[] bytes = br.ReadBytes((int)FileUpload1.PostedFile.InputStream.Length);
                string strConnString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
                using (SqlConnection con = new SqlConnection(strConnString))
                {
                    using (SqlCommand cmd = new SqlCommand())
                    {
                        cmd.CommandText = "INSERT INTO tblfile(Name, ContentType, Data) VALUES (@Name, @ContentType, @Data)";
                        cmd.Parameters.AddWithValue("@Name", Path.GetFileName(FileUpload1.PostedFile.FileName));
                        cmd.Parameters.AddWithValue("@ContentType", "audio/mpeg3");
                        cmd.Parameters.AddWithValue("@Data", bytes);
                        cmd.Connection = con;
                        con.Open();
                        cmd.ExecuteNonQuery();
                        con.Close();
                    }
                }
            }
            Response.Redirect(Request.Url.AbsoluteUri);
        }
        private void BindGrid()
        {
            string strConnString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
            using (SqlConnection con = new SqlConnection(strConnString))
            {
                using (SqlCommand cmd = new SqlCommand())
                {
                    cmd.CommandText = " SELECT Id, Name, ContentType FROM tblfile WHERE ContentType = 'audio/mpeg3'";
                    cmd.Connection = con;
                    con.Open();
                    GridView1.DataSource = cmd.ExecuteReader();
                    GridView1.DataBind();
                    con.Close();
                }
            }
        }
    }
}

Mọi người cho mình hỏi tại sao cái audio nó lại không phát nhạc nhỉ . mình cảm ơn
cái bài này mình tham khảo trên :https://www.aspsnippets.com/Articles/Upload-and-Play-MP3-Audio-files-from-Database-using-HTML5-Audio-Player-in-ASPNet.aspx , những lúc mĩnh xem demo của họ thì cũng gặp lỗi như mình là mp3 không phát nên mình nên đây hỏi ae . đây có phải do lúc upload file lỗi hay là do lúc lấy data từ sql về lỗi ạ mình cảm ơn

Đơn giản là bạn xem nguồn (source) của tập tin trên trình duyệt có ổn chưa? Chạy thử trên trình duyệt xem. Nhấn xem nguồn hoặc F12 ấy.

3 Likes

nếu f12 mà mình không thấy file mp3 tức là do đọc dữ liệu từ sql sai à .
Bạn có tài liệu nào về cách đọc dữ liệu kiểu dạng mp3 từ sql của asp.net không .

à mình đã sửa được rồi nhé . cấu trúc trên là đúng nhưng do thẻ tag như thế này không hỗ trợ nữa nên không phát được file

<audio controls="controls">  <source src='<%# Eval("Id", "~/FileCS.ashx?Id={0}") %>' type = '<%# Eval("ContentType") %>' />  </audio>

mình thay bằng thẻ

<audio src='<%# Eval("Id", "FileCS.ashx?Id={0}") %>' controls="controls" ></audio>
3 Likes
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?