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();

错误：ReferenceError：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)) {实际上将autoplay属性设置为true，而不是检查它是否为true并始终返回truthy值。请改用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;
    }
});

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

2 个答案: