javascript - 试图让音频首先开始播放
问题描述
我怎样才能让音频在这里开始播放?
我试图在单击之前先播放音频。我该怎么做?我尝试了不同的东西,但无法弄清楚。之后的代码是它最初的工作方式。
https://jsfiddle.net/pezuLqvo/142/
(function iife() {
"use strict";
const show = (el) => el.classList.remove("hide");
const hide = (el) => el.classList.add("hide");
function getButtonContainer(el) {
while (el.classList.contains("playButton") === false) {
el = el.parentNode;
}
return el;
}
function hideAllButtons(button) {
button.querySelectorAll(".play, .pause, .speaker").forEach(hide);
}
function getPlay(button) {
return button.querySelector(".play");
}
function getPause(button) {
return button.querySelector(".pause");
}
function showPlayButton(button) {
const play = getPlay(button);
hideAllButtons(button);
show(play);
button.classList.remove("active");
}
function isPlaying(button) {
const play = getPlay(button);
return play.classList.contains("hide");
}
function pauseAllButtons() {
const buttons = document.querySelectorAll(".playButton");
buttons.forEach(function hidePause(button) {
if (isPlaying(button)) {
showPlayButton(button);
}
});
}
function showPauseButton(button) {
const pause = getPause(button);
pauseAllButtons();
hideAllButtons(button);
show(pause);
}
function getAudio() {
return document.querySelector("audio");
}
function playAudio(player, src) {
player.volume = 1.0;
if (player.getAttribute("src") !== src) {
player.setAttribute("src", src);
}
player.play();
}
function showButton(button, opts) {
if (opts.playing) {
showPlayButton(button);
} else {
showPauseButton(button);
}
}
function pauseAudio(player) {
player.pause();
}
function manageAudio(player, opts) {
if (opts.playing) {
pauseAudio(player);
} else {
playAudio(player, opts.src);
}
}
function togglePlayButton(button) {
const player = getAudio();
const playing = isPlaying(button);
showButton(button, {
playing
});
manageAudio(player, {
src: button.getAttribute("data-audio"),
playing
});
}
function playButtonClickHandler(evt) {
const button = getButtonContainer(evt.target);
togglePlayButton(button);
}
function initButton(selector) {
const wrapper = document.querySelector(selector);
wrapper.addEventListener("click", playButtonClickHandler);
}
initButton(".wrapf");
}());
它最初是这样工作的:
https://jsfiddle.net/pezuLqvo/143/
(function iife() {
"use strict";
const show = (el) => el.classList.remove("hide");
const hide = (el) => el.classList.add("hide");
function getButtonContainer(el) {
while (el.classList.contains("playButton") === false) {
el = el.parentNode;
}
return el;
}
function hideAllButtons(button) {
button.querySelectorAll(".play, .pause, .speaker").forEach(hide);
}
function getPlay(button) {
return button.querySelector(".play");
}
function getPause(button) {
return button.querySelector(".pause");
}
function showPlayButton(button) {
const play = getPlay(button);
hideAllButtons(button);
show(play);
button.classList.remove("active");
}
function isPlaying(button) {
const play = getPlay(button);
return play.classList.contains("hide");
}
function pauseAllButtons() {
const buttons = document.querySelectorAll(".playButton");
buttons.forEach(function hidePause(button) {
if (isPlaying(button)) {
showPlayButton(button);
}
});
}
function showPauseButton(button) {
const pause = getPause(button);
pauseAllButtons();
hideAllButtons(button);
show(pause);
}
function getAudio() {
return document.querySelector("audio");
}
function playAudio(player, src) {
player.volume = 1.0;
if (player.getAttribute("src") !== src) {
player.setAttribute("src", src);
}
player.play();
}
function showButton(button, opts) {
if (opts.playing) {
showPlayButton(button);
} else {
showPauseButton(button);
}
}
function pauseAudio(player) {
player.pause();
}
function manageAudio(player, opts) {
if (opts.playing) {
pauseAudio(player);
} else {
playAudio(player, opts.src);
}
}
function togglePlayButton(button) {
const player = getAudio();
const playing = isPlaying(button);
showButton(button, {
playing
});
manageAudio(player, {
src: button.getAttribute("data-audio"),
playing
});
}
function playButtonClickHandler(evt) {
const button = getButtonContainer(evt.target);
togglePlayButton(button);
}
function initButton(selector) {
const wrapper = document.querySelector(selector);
wrapper.addEventListener("click", playButtonClickHandler);
}
initButton(".wrapf");
}());
解决方案
您的侦听器基于click
事件,<svg class="play hide"...
只应用 CSS 样式而不发生任何事件。
您需要重写initButton()
函数并检查播放器状态
function initButton(selector) {
const wrapper = document.querySelector(selector);
wrapper.addEventListener("click", playButtonClickHandler);
if (isPlaying(wrapper)) {
manageAudio(getAudio(), {
src: wrapper.getAttribute("data-audio"),
playing: false
})
}
}
推荐阅读
- python - Scipy Lapack - 如何找到正确的 Lapack 函数
- terminal - 从 fasta 文件中的每一行中删除模式
- java - 连接到 Azure 数据库时出现 ClassNotFoundException
- javascript - 如何确保 OAuth2 认证成功后重新发送原始 Google Chat 消息?
- javascript - 从表数据创建一个数组,当前在数组中获取空字符串
- postgresql - Postgres:如何验证哪个证书用于 SSL
- automated-tests - Botium - Google 助理连接器 - 响应不为空时错误为空响应
- java - 线程“主”javax.net.ssl.SSLHandshakeException 中的异常:收到致命警报:handshake_failure
- c++ - 仅当函数在 C++ 的另一个文件中定义时如何执行 LOC
- java - java.net.SocketException:将 json 有效负载发布到 rest api 时管道损坏(写入失败)