Question

这是一个简单的查询，但不知怎的，我似乎无法指出看似错误的事情。

我有两个按钮，即问题＆＃39;并且需要＆＃39;。在点击前者时，需要播放音频文件1，类似地，当稍后点击时，音频文件1应该停止并且音频文件2被播放。我为此编写的代码是：

var playing = false;

$("#problem").click(function(event) {
    $("#audio").html('');
    $("#audio").html('<source src="audio/expertise/file1.mp3" type="audio/mp3"><source src="audio/expertise/file1.wav" type="audio/x-wav"><source src="audio/expertise/file1.ogg" type="audio/ogg">');
    playing = true;
});

$('.need_btn').attr('id', 'need_btn');

$("#need_btn").click(function(event) {
    if (playing == true) {
        $("#audio").trigger('pause');
        playing = false;

        if (playing == false){

            $("#audio").attr('src','<source src="audio/expertise/file2.mp3" type="audio/mp3"><source src="audio/expertise/file2.wav" type="audio/x-wav"><source src="audio/expertise/file2.ogg" type="audio/ogg">');
            $("#audio").trigger('play');
            playing = true;
        };
    }
    else{
        /*$("#audio").trigger('play');*/
        };
});

这适用于播放文件1，当单击第二个按钮但不播放文件2时暂停文件1。我可以改变什么才能使它发挥作用？

Answer 1

我认为你的问题就是这段代码：

 $("#audio").attr('src','<source src="audio/expertise/file2.mp3" type="audio/mp3"><source src="audio/expertise/file2.wav" type="audio/x-wav"><source src="audio/expertise/file2.ogg" type="audio/ogg">');

我刚刚浏览了official documentation，看起来您使用.attr的方式不正确。我没有尝试过我要发布的代码，但假设你确实想设置source元素的属性，你可能想尝试一下这些代码：

 $( "source" ).attr({
 src: "audio/expertise/file2.mp3",
 type: "audio/mp3"
 });

现在我知道您拥有.ogg，.wav和.mp3版本。所以我认为你也可以像html那样直接为id为“audio”的元素设置file1。我建议这样的事情：

 $("#audio").html('<source src="audio/expertise/file2.mp3" type="audio/mp3"><source src="audio/expertise/file2.wav" type="audio/x-wav"><source src="audio/expertise/file2.ogg" type="audio/ogg">');

这将为具有所需标记的相应元素设置html。我希望这能让你开始朝着正确的方向前进。

音频播放/暂停在不同的按钮上单击Jquery

1 个答案: