динамически добавляя в html5 аудио

Question

При каждом нажатии кнопки .startb мой проигрыватель не появляется. Я использовал этот точный метод для динамического добавления флэш-аудиоплееров по щелчку, но, похоже, он не работает с аудиоплеерами html5 ... ничего не появляется.

HTML

<div class="audioContainer">
            <div class="audioTitle">my title</div>
            <div class="playerHolder">
            <div class="htmlPlayer" id="player1"></div>
            <div class="startb" id="startb2" ><img src="dbs/images/start.png" width="40" height="40" /></div>
            <div class="flashObj" id="test2"></div>
            <div class="mp3Logo"><a href="Audio/music.mp3"><img src="dbs/images/mp3_off.gif"/></a></div>
            </div>
</div>

JS

$(".startb").css({"display":"inline-block"});
$(".flashObj").css({"display":"none"});
$(".htmlPlayer").css({"display":"none"});
$(".mp3Logo").css({"display":"none"});
$('.startb').click(function() {
    htmlPlayerId = $(this).siblings('.htmlPlayer').attr('id');
    startbId = $(this).attr("id");
    musicLink = $(this).siblings('.mp3Logo').find('a').attr('href');
    htmlLayout = '<audio class="AudioPlayerV1" preload="none" width="292">'+
                 '<source src="'+musicLink+'" type="audio/mpeg" />'+
                 '</audio>'
    $('#'+startbId).css({"display":"none"});
    $('#'+htmlPlayerId).append(htmlLayout);
    $('#'+htmlPlayerId).css({"display":"inline-block"});

});

Answer 1

Вы можете оптимизировать ваш скрипт:

$(".startb").css({"display":"inline-block"});
$(".flashObj, .htmlPlayer, .mp3Logo").css({"display":"none"});
$('.startb').click(function() {
    var htmlLayout = '<audio class="AudioPlayerV1" preload="none" width="292">'+
                     '<source src="' + $(this).siblings('.mp3Logo').find('a').attr('href') + '" type="audio/mpeg" />'+
                     '</audio>'
    $(this).css({"display":"none"})
           .siblings('.htmlPlayer').append(htmlLayout).css({"display":"inline-block"});
});

Обновление

Поскольку вы используете плагин для загрузки ваших аудиофайлов (AudioPlayerV1), вы должны инициализировать элементы <audio> с помощью плагина:

$(".startb").css({"display":"inline-block"});
$(".flashObj, .htmlPlayer, .mp3Logo").css({"display":"none"});
$('.startb').click(function() {
    var htmlLayout = '<audio preload="none" width="292">'+
                     '<source src="' + $(this).siblings('.mp3Logo').find('a').attr('href') + '" type="audio/mpeg" />'+
                     '</audio>'
    $(this).css({"display":"none"})
           .siblings('.htmlPlayer').append(htmlLayout).css({"display":"inline-block"});
    $(this).siblings('.htmlPlayer').children('audio').AudioPlayerV1();
});

Источник: http://1.s3.envato.com/files/14653378/index.html#options (нажмите ссылку "Методы API")