Play Sound on ASP.Net GridView row Button Click using JavaScript

Hi smile,

AddHTML5 Audio element with file path in the page and set the display property to None.

When the GridView Button will be clicked use the play function to play the sound.

Refer below sample.

HTML

<audio style="display: none;" id="myAudio">
    <source src='<%= ResolveUrl("~/Files/sample.mp3") %>' type='audio/mpeg' />
</audio>
<asp:GridView ID="GridView1" DataKeyNames="TID" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="S_Name" HeaderText="Service Code" />
        <asp:BoundField DataField="Token_Num" HeaderText="Token Number" />
        <asp:TemplateField>
            <ItemTemplate>
                <asp:Button ID="btnGet" Text="Call" runat="server" OnClientClick="Play();" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
<script type="text/javascript">
    function Play() {
        var au = document.getElementById("myAudio");
        au.play();
    }
</script>

Namespaces

C#

using System.Data;

VB.Net

Imports System.Data

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[3] {
            new DataColumn("TID"),
            new DataColumn("S_Name"),
            new DataColumn("Token_Num")
        });
        dt.Rows.Add(1, "Chetak", "12345");
        dt.Rows.Add(2, "Vidhan", "13456");
        dt.Rows.Add(3, "Satya", "12765");
        dt.Rows.Add(4, "Akash", "98345");
        dt.Rows.Add(5, "Amit", "56129");
        GridView1.DataSource = dt;
        GridView1.DataBind();
    }
}

VB.Net

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim dt As DataTable = New DataTable()
        dt.Columns.AddRange(New DataColumn(2) {
            New DataColumn("TID"),
            New DataColumn("S_Name"),
            New DataColumn("Token_Num")
        })
        dt.Rows.Add("Chetak", "12345")
        dt.Rows.Add("Vidhan", "13456")
        dt.Rows.Add("Satya", "12765")
        dt.Rows.Add("Akash", "98345")
        dt.Rows.Add("Amit", "56129")
        GridView1.DataSource = dt
        GridView1.DataBind()
    End If
End Sub