kitty sarvaj kitty sarvaj - 4 months ago 27x
Ajax Question

Creating the multiple Audio Tag inside the div and play MP3

I am having ajax data where I am getting base64 Mp3 data from my DB, on success I am able to play the mp3 using audio tag, but when I get more than one base64 data from DB, I have to crate multiple audio tags and I have to link base64 to each audio tags. Below is my code:

<div id="container">
<audio id="audio" controls="controls" autobuffer="autobuffer" autoplay="autoplay"></audio>

///Ajax call getting the base64 from DB and adding has source to audio tag
type: "POST",
dataType: "json",
url: 'xxxx/xxxx/xxxxx',
data: xxxxxx,
success: function (data) {
if (data[0].Base64 != null) {
$.each(data, function (key, value) {
alert(key + ": " + value);
$("#audio").html("<source src=\"data:audio/Mp3;base64," + value.Base64 + "\"/>"); });
} else {
alert("No Data")


In your each() loop, you can create new DOM objects for every entry and append it to your #container:

var audio = $('<audio><source src="data:audio/Mp3;base64,' + value.Base64 + '"/>');