Question

Whenever .startb is clicked, my player does not appear. I used this exact method to dynamically add in flash audio players on click, but it does not seem to work with html5 audio players..nothing appears.

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

You can optimize your script a lot:

$(".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"});
});

Update

Since you are using a plugin to load your audio files (AudioPlayerV1), you should initialize your <audio> elements with the plugin:

$(".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();
});

Source: http://1.s3.envato.com/files/14653378/index.html#options (click on the “API METHODS” link)