javascript - 为什么我的音频自动播放两次？

Question

这是一个jsfiddle：http: //jsfiddle.net/webmagnets/snGY4/

当您单击圆形播放按钮时，音频播放两次。

这是html：<i class="icon-play-circle" />

这是jquery代码：

   $("i.icon-play-circle").click(function(){
    var word = "你好"
    var url = 'http://apifree.forvo.com/key/b1b0641fac44c20e42373e0af5d05325/format/json/callback/pronounce/action/standard-pronunciation/word/'+encodeURI(word)+'/language/zh';
    $.ajax({
        url: url,
        jsonpCallback: "pronounce",
        dataType: "jsonp",
        type: "jsonp",
        success: function (json) {
       var mp3 = json.items[0].pathmp3;
       var ogg = json.items[0].pathogg;
       var sound = '<audio autoplay="true"><source src='+mp3+'</source><source src='+ogg+'</source></audio>';
       $('body').append(sound);
   },
    error: function(){
        console.log("error");
}});
});

//上面的api键是免费的。

谁能帮我解决这个问题？

Answer 1

这最终为我工作：http: //jsfiddle.net/webmagnets/snGY4/3/

html:

<i class="icon-play-circle" />
<audio>
    <source id='mp3' src='' />
    <source id='ogg' src='' />
</audio>

javascript:

       $("i.icon-play-circle").click(function(){
        var word = "你好";
        var url = 'http://apifree.forvo.com/key/b1b0641fac44c20e42373e0af5d05325/format/json/callback/pronounce/action/standard-pronunciation/word/'+encodeURI(word)+'/language/zh';
        $.ajax({
            url: url,
            jsonpCallback: "pronounce",
            dataType: "jsonp",
            type: "jsonp",
            success: function (json) {
           var mp3 = json.items[0].pathmp3;
           var ogg = json.items[0].pathogg;
           var sound = '<audio autoplay="false"><source src='+mp3+' type="audio/mpeg"</source><source src='+ogg+' type="audio/ogg"</source></audio>';
                $('audio:first-child').attr('src',mp3);
                $('audio:last-child').attr('src',ogg);
                $('audio')[0].play();
       },
        error: function(){
            console.log("error");
    }});
    });



//above api key is a free throw away.