0

我用 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();，但我不能更改循环属性

4

2 回答 2

2

也使用 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();
于 2013-01-27T19:02:11.583 回答
1

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;
    }
});
于 2013-01-27T18:59:37.050 回答