jQuery 引用 id 时出现问题 - 使用 Howler.js
jQuery problem referencing id - Using Howler.js
我有一个迷宫,我正在努力整理:
我有这个带有 12 个锚标签的网格
for (let i = 1; i <= 12; i++) {
$("#minuetti").append(
`<div class="col-6 col-md-3"> <a id="minuetto${i}" class="btn btn-primary btn-lg mb-1 minuetto">Minuetto ${i}</a></div>`
);
}
每个人都将使用下面的代码使用 Howler.js 播放不同的 mp3 文件。
$(".minuetto").on("click", function() {
let id = this.id;
let minuettoPath = `assets/music/${id}.mp3`;
let cell = new Howl({
src: [minuettoPath],
onplay: function() {
$(`#${id}`).text("Stop");
$(".minuetto").addClass("disabled");
$(`#${id}`).removeClass("disabled");
$(`#${id}`).removeClass("minuetto");
$(`#${id}`).on("click", function() {
cell.stop();
});
},
onend: function() {
$(".minuetto").removeClass("disabled");
$(`#${id}`).text(`Minuetto ${id.slice(8)}`);
$(`#${id}`).addClass("minuetto");
this.unload();
}
});
cell.play();
});
我的问题:
我正在尝试更改单击按钮的文本并使其保持启用状态。
我将禁用所有剩余的 (11) 个按钮,直到 mp3 文件结束。
但是,当我单击启用按钮(正在播放的按钮)而不是停止我的 mp3 时,它会重新启动。
我的 jQuery 在这里做错了什么?我正在引用我的 id 并调用函数来执行 cell.stop()
但由于某种原因 jQuery 再次运行播放,即使我从播放中删除了 class minuetto
按钮。
我真的很困惑。请帮忙?
- 仅使用
const sound = new Howl({src: mp3.path});
- 使用 jQuery 的对象元素构造函数创建元素
$({})
- 分配所需的事件,例如
click()
、play()
和 stop()
,您可以在需要时 trigger
执行所需的操作
- 使用 Howler 的
sound.playing()
来确定需要哪个触发器回调
// Use an array of objects instead, otherwise if one day
// you decide to remove a numeric song you'll have to replace it with another.
// This also allows you to change the order of songs:
const mp3list = [
{name:'Enter Sandman', path:'https://upload.wikimedia.org/wikipedia/en/3/39/Metallica_-_Enter_Sandman.ogg'},
{name:'Back in Black', path:'http://upload.wikimedia.org/wikipedia/en/4/45/ACDC_-_Back_In_Black-sample.ogg',},
{name:'U2 - One', path:'https://upload.wikimedia.org/wikipedia/en/5/5e/U2_One.ogg',},
];
let $allMP3 = [];
const $newMP3 = mp3 => {
// HOWL
const sound = new Howl({src: mp3.path});
// $ ELEMENT
return $('<div>', {
class: 'minuetto',
text: mp3.name,
on: {
click() {
$allMP3.forEach($el => $el.not(this).trigger('stop'));
$(this).trigger(sound.playing() ? 'stop' : 'play');
},
play() {
$(this).text("Stop");
sound.play();
},
stop() {
$(this).text(mp3.name);
sound.stop();
}
}
});
};
$allMP3 = mp3list.map($newMP3); // Populate array of $ elements
$("#minuetti").append($allMP3); // Append once!
<div id="minuetti"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.1.3/howler.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
我有一个迷宫,我正在努力整理:
我有这个带有 12 个锚标签的网格
for (let i = 1; i <= 12; i++) {
$("#minuetti").append(
`<div class="col-6 col-md-3"> <a id="minuetto${i}" class="btn btn-primary btn-lg mb-1 minuetto">Minuetto ${i}</a></div>`
);
}
每个人都将使用下面的代码使用 Howler.js 播放不同的 mp3 文件。
$(".minuetto").on("click", function() {
let id = this.id;
let minuettoPath = `assets/music/${id}.mp3`;
let cell = new Howl({
src: [minuettoPath],
onplay: function() {
$(`#${id}`).text("Stop");
$(".minuetto").addClass("disabled");
$(`#${id}`).removeClass("disabled");
$(`#${id}`).removeClass("minuetto");
$(`#${id}`).on("click", function() {
cell.stop();
});
},
onend: function() {
$(".minuetto").removeClass("disabled");
$(`#${id}`).text(`Minuetto ${id.slice(8)}`);
$(`#${id}`).addClass("minuetto");
this.unload();
}
});
cell.play();
});
我的问题:
我正在尝试更改单击按钮的文本并使其保持启用状态。
我将禁用所有剩余的 (11) 个按钮,直到 mp3 文件结束。
但是,当我单击启用按钮(正在播放的按钮)而不是停止我的 mp3 时,它会重新启动。
我的 jQuery 在这里做错了什么?我正在引用我的 id 并调用函数来执行 cell.stop()
但由于某种原因 jQuery 再次运行播放,即使我从播放中删除了 class minuetto
按钮。
我真的很困惑。请帮忙?
- 仅使用
const sound = new Howl({src: mp3.path});
- 使用 jQuery 的对象元素构造函数创建元素
$({})
- 分配所需的事件,例如
click()
、play()
和stop()
,您可以在需要时trigger
执行所需的操作 - 使用 Howler 的
sound.playing()
来确定需要哪个触发器回调
// Use an array of objects instead, otherwise if one day
// you decide to remove a numeric song you'll have to replace it with another.
// This also allows you to change the order of songs:
const mp3list = [
{name:'Enter Sandman', path:'https://upload.wikimedia.org/wikipedia/en/3/39/Metallica_-_Enter_Sandman.ogg'},
{name:'Back in Black', path:'http://upload.wikimedia.org/wikipedia/en/4/45/ACDC_-_Back_In_Black-sample.ogg',},
{name:'U2 - One', path:'https://upload.wikimedia.org/wikipedia/en/5/5e/U2_One.ogg',},
];
let $allMP3 = [];
const $newMP3 = mp3 => {
// HOWL
const sound = new Howl({src: mp3.path});
// $ ELEMENT
return $('<div>', {
class: 'minuetto',
text: mp3.name,
on: {
click() {
$allMP3.forEach($el => $el.not(this).trigger('stop'));
$(this).trigger(sound.playing() ? 'stop' : 'play');
},
play() {
$(this).text("Stop");
sound.play();
},
stop() {
$(this).text(mp3.name);
sound.stop();
}
}
});
};
$allMP3 = mp3list.map($newMP3); // Populate array of $ elements
$("#minuetti").append($allMP3); // Append once!
<div id="minuetti"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.1.3/howler.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>