How to play audio from Oracle database in ASP.NET using HTML5 Audio tag

Introduction
In this article I will explain how to play audio stored in Oracle database using HTML5 <audio> tag
Mozilla Firefox_2014-06-26_23-17-23
Description
In this article first we will download audio in a local folder from the database then we will list audios in a GridView. We will place an HTML5 <audio> tag in each row of the GridView to play the audio

Step 1: Create a new ASP.NET Application
Greenshot_2014-06-28_17-01-06
Step 2: Add a GridView to the Default.aspx page as following

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head id="Head1" runat="server"&gt;
&lt;title&gt;&lt;/title&gt;
&lt;style type="text/css"&gt;
.fileupload
{
border: #7b9ebd 1px solid;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;form id="form1" runat="server"&gt;
&lt;div&gt;
&lt;div style="width:400px; padding:5px; margin:auto; display:table;"&gt;
&lt;asp:GridView ID="gvAudios" runat="server" CellPadding="4"
EnableModelValidation="True" ForeColor="#333333" GridLines="None"
Width="400px"&gt;
&lt;AlternatingRowStyle BackColor="White" ForeColor="#284775" /&gt;
&lt;Columns&gt;
&lt;asp:TemplateField HeaderText="Play"&gt;
&lt;ItemTemplate&gt;
&lt;audio controls&gt;&lt;source src='audio/&lt;%# Eval("AUDIO") %&gt;' type='audio/wav'&gt;Your browser does not support the audio element.&lt;/audio&gt;
&lt;/ItemTemplate&gt;
&lt;/asp:TemplateField&gt;
&lt;/Columns&gt;
&lt;EditRowStyle BackColor="#999999" /&gt;
&lt;FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" /&gt;
&lt;HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" /&gt;
&lt;PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" /&gt;
&lt;RowStyle BackColor="#F7F6F3" ForeColor="#333333" /&gt;
&lt;SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" /&gt;
&lt;/asp:GridView&gt;
&lt;/div&gt;

&lt;div style="clear:both; height:10px;"&gt;&lt;/div&gt;

&lt;div style="width:400px; padding:5px;margin:auto; display:table;"&gt;
&lt;asp:Label ID="lblMessage" runat="server" Text="" BackColor="Yellow" ForeColor="Red" Width="400px"&gt;&lt;/asp:Label&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;

We used ItemTemplate inside GridView to render <audio> tag with “AUDIO” value from the database

Step 3: Add reference to System.Data.OracleClient in the project
Greenshot_2014-06-28_17-01-33
Step 4: Write two methods, ListAudio and DownloadAudio as following

C#:

string ConString ="Your connection string";

string CmdString = "SELECT AUDIO_NAME AS Audio, AUDIO_DATA, AUDIO_EXTENSION AS Extension, CREATION_DATE AS DateTime FROM AUDIOS";

private void ListAudio()
{
using (OracleConnection con = new OracleConnection(ConString))
{
try
{
gvAudios.DataSource = null;
OracleCommand cmd = new OracleCommand(CmdString, con);
con.Open();

OracleDataReader reader = cmd.ExecuteReader();
gvAudios.DataSource = reader;
gvAudios.DataBind();
}
catch (Exception ex)
{
lblMessage.Text = ex.Message;
}
finally
{
if (con.State == System.Data.ConnectionState.Open)
con.Close();
}
}
}

private void DownloadAudio()
{
int bufferSize = 1024;
int columnIndex = 1;
long bytesReturned, startIndex = 0;
byte[] audioData = new byte[bufferSize];
string audioName = string.Empty;
FileStream fs;
BinaryWriter bw;

using(OracleConnection con=new OracleConnection(ConString))
{
try
{
OracleCommand cmd = new OracleCommand(CmdString, con);
con.Open();
OracleDataReader reader = cmd.ExecuteReader(CommandBehavior.SequentialAccess);
while (reader.Read())
{
audioName = reader["Audio"].ToString();
if (!Directory.Exists(Server.MapPath("audio")))
{
Directory.CreateDirectory(Server.MapPath("audio"));
}

fs = new FileStream(Server.MapPath("audio/" + audioName), FileMode.OpenOrCreate, FileAccess.ReadWrite);
bw = new BinaryWriter(fs);

bytesReturned = reader.GetBytes(columnIndex, startIndex, audioData, 0, bufferSize);

while (bytesReturned == bufferSize)
{
bw.Write(audioData);
bw.Flush();
startIndex += bufferSize;
bytesReturned = reader.GetBytes(columnIndex, startIndex, audioData, 0, bufferSize);
}

bw.Write(audioData, 0, (int)bytesReturned - 1);
bw.Close();
fs.Close();
}
}
catch (Exception ex)
{
lblMessage.Text = ex.Message;
}
finally
{
if (con.State == System.Data.ConnectionState.Open)
con.Close();
}
}
}

VB.NET:

[generic]
Dim ConString As String = “Your Connection String”

Dim CmdString As String = “SELECT AUDIO_NAME AS Audio, AUDIO_DATA, AUDIO_EXTENSION AS Extension, CREATION_DATE AS DateTime FROM AUDIOS”

Private Sub ListAudio()
Using con As New OracleConnection(ConString)
Try
gvAudios.DataSource = Nothing
Dim cmd As New OracleCommand(CmdString, con)

con.Open()
Dim reader As OracleDataReader = cmd.ExecuteReader()
gvAudios.DataSource = reader
gvAudios.DataBind()
Catch ex As Exception
lblMessage.Text = ex.Message
Finally
If con.State = ConnectionState.Open Then
con.Close()
End If
End Try
End Using
End Sub

Private Sub DownloadAudio()
Dim bufferSize As Integer = 1024
Dim columnIndex As Integer = 1
Dim bytesReturned As Long = 0
Dim startIndex As Long = 0
Dim audioData(bufferSize) As Byte
Dim audioName As String
Dim fs As FileStream
Dim bw As BinaryWriter

Using con As New OracleConnection(ConString)
Try
Dim cmd As New OracleCommand(CmdString, con)
con.Open()

Dim reader As OracleDataReader = cmd.ExecuteReader(CommandBehavior.SequentialAccess)

If Directory.Exists(Server.MapPath(“audio”)) = False Then
Directory.CreateDirectory(Server.MapPath(“audio”))
End If

While reader.Read()
audioName = reader(“Audio”).ToString()

fs = New FileStream(Server.MapPath(“audio/” + audioName), FileMode.OpenOrCreate, FileAccess.ReadWrite)
bw = New BinaryWriter(fs)
bytesReturned = reader.GetBytes(columnIndex, startIndex, audioData, 0, bufferSize)

While bytesReturned = bufferSize
bw.Write(audioData)
bw.Flush()
startIndex += bufferSize
bytesReturned = reader.GetBytes(columnIndex, startIndex, audioData, 0, bufferSize)
End While

bw.Write(audioData, 0, Integer.Parse(bytesReturned – 1))
bw.Close()
fs.Close()
End While

Catch ex As Exception
lblMessage.Text = ex.Message
Finally
If (con.State = System.Data.ConnectionState.Open) Then
con.Close()
End If
End Try
End Using

End Sub
[/generic]

ListAudio method lists audio in the GridView and DownloadAudio method saves audio in Audio folder.

Step 5: Call both methods in the page load

C#:

protected void Page_Load(object sender, EventArgs e)
{
ListAudio();
DownloadAudio();
}

VB.NET:

[generic]
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
ListAudio()
DownloadAudio()
End Sub
[/generic]

 

One thought on “How to play audio from Oracle database in ASP.NET using HTML5 Audio tag

Leave a Reply

Your email address will not be published. Required fields are marked *