如何添加或删除html5的音频属性<audio>？

Question

>我创建了一个带有html5和javascript的多轨播放器。

var track_1 = document.getElementById('audio_1');

我制作了自定义控制按钮：音量，播放，停止，暂停，例如：

$bt_play_audio_mixette_1.click(function() {
    if (track_1.paused == false) {
        track_1.pause();
    } else {
        track_1.play();
    }
});

我有一个按钮"循环"，我想动态修改<audio>属性loop。

我尝试过.attr();或.prop();但没有成功。

你知道这段代码出了什么问题吗：

var loop_1_active = true;
$bt_loop_audio_1.click(function() {
    if (track_1.prop("autoplay", true)) {
        track_1.prop("autoplay", false);
        loop_1_active = false;
    } else {
        track_1.prop('loop', true)
        track_1.attr("autoplay", true);
    }
});

编辑：

如果我使用 jquery 对象：

var track_1_B = $('#audio_1');

我不能使用pause();

错误

：引用错误： track_1未定义track_1.pause（）;

如果我使用纯JS：

var track_1 = document.getElementById('audio_1'); 

我可以使用pause();但无法更改循环属性

Answer 1

也使用 jquery：

var $track_1 = $('#audio_1'); // jquery object
var track_1 = document.getElementById('audio_1'); // pure js DOM element

并且仅在jquery对象上使用jquery方法。

$track1.click(//...
$track1.attr(//...
$track1.prop(//...

DOM 元素上的其他方法

trakck1.pause();

Answer 2

if (track_1.prop("autoplay", true)) {实际上将自动播放属性设置为 true，而不是检查它是否为真，并且将始终返回一个真实值。请改用if (track_1.prop("autoplay")) {。我现在看到track_1是一个 dom 元素而不是 jQuery 对象，因此需要将其转换为一个以使用 prop() ...例如 $(track_1).prop("autoplay") .您也可以直接访问元素属性，而无需使用 jQuery

var track_1 = document.getElementById('audio_1');
var loop_1_active = true;
$bt_loop_audio_1.click(function() {
    if (track_1.autoplay) {
        track_1.autoplay = false;
        loop_1_active = false;
    } else {
        track_1.loop = true;
        track_1.autoplay = true;
    }
});