Question

我有ajax数据，我从我的数据库获取base64 Mp3数据，成功后我能够使用音频标签播放mp3，但是当我从DB获得多个base64数据时，我必须创建多个音频标签，我必须将base64链接到每个音频标签。以下是我的代码：

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

///Ajax call getting the base64 from DB and adding has source to audio tag
 $.ajax({
    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")
        }
    }
 });

Answer 1

在each()循环中，您可以为每个条目创建新的DOM对象，并将其附加到#container：

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

Answer 2

您可以遵循以下类型的结构：

///Ajax call getting the base64 from DB and adding has source to audio tag
 $.ajax({
    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);
            $("#container").append("<audio source src=\"data:audio/Mp3;base64," + value.Base64 + " controls='controls' autobuffer='autobuffer' autoplay='autoplay'></audio>"); });
        } else {
            alert("No Data")
        }
    }
 });

 ///Html
<div id="container">

</div>

Answer 3

试试这个......

<div id="boxes">
    <li id="nyan" class="audioclick"><audio src="song.mp3"/></li>
    <li id="duck" class="audioclick"><audio src="duck.mp3"/></li>
    <li id="duck" class="audioclick"><audio src="cat.mp3"/></li>
</div>

$(function(){
    $('#boxes').on('click','audioclick',function(){
        var $eq = $(this).eq(),
            audio = $('audio').get($eq);

        if (audio.paused){
            audio.play();
        } else {
            audio.pause();
        }
    });
});

在div中创建多个音频标签并播放MP3

3 个答案: