如何添加或删除 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();

error :ReferenceError: track_1 is not defined 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)) { 实际上将 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;
    }
});