Trying to get the audio to start playing first
1
How would I get the audio to start playing here?
I'm trying to have the audio play first before it's clicked.
How would I do this? I tried different things and couldn't figure it out.
The code after this is how it originally worked.
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");
}());
It originally worked like this:
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");
}());
javascript audio html5-audio
asked Nov 22 at 18:15
J Dawg
448
|
show 7 more comments
1
How would I get the audio to start playing here?
I'm trying to have the audio play first before it's clicked.
How would I do this? I tried different things and couldn't figure it out.
The code after this is how it originally worked.
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");
}());
It originally worked like this:
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");
}());
javascript audio html5-audio
asked Nov 22 at 18:15
J Dawg
448
Just add the attributeautoplayto the audio player.
– Cryptopat
Nov 22 at 19:24
That won't work. I already tried that.
– J Dawg
Nov 22 at 19:24
Is your audio playing after pressing play?
– Cryptopat
Nov 22 at 19:26
Yes, but I'm trying to get it to play before anything is pressed. This Code is set up differently. jsfiddle.net/pezuLqvo/142 Audio should start playing first before it is clicked.
– J Dawg
Nov 22 at 19:27
1
There must be a way to do it, even if I was using a regular mp3 stream. Just because it's shputcast shouldn't make a difference. Maybe someone else would be able to figure it out.
– J Dawg
Nov 22 at 19:53
|
show 7 more comments
1
1
1
How would I get the audio to start playing here?
I'm trying to have the audio play first before it's clicked.
How would I do this? I tried different things and couldn't figure it out.
The code after this is how it originally worked.
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");
}());
It originally worked like this:
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");
}());
javascript audio html5-audio
asked Nov 22 at 18:15
J Dawg
448
How would I get the audio to start playing here?
I'm trying to have the audio play first before it's clicked.
How would I do this? I tried different things and couldn't figure it out.
The code after this is how it originally worked.
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");
}());
It originally worked like this:
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");
}());
javascript audio html5-audio
javascript audio html5-audio
asked Nov 22 at 18:15
J Dawg
448
asked Nov 22 at 18:15
J Dawg
448
edited Nov 22 at 19:18
asked Nov 22 at 18:15
J Dawg
448
asked Nov 22 at 18:15
J Dawg
448
asked Nov 22 at 18:15
J Dawg
448
448
Just add the attributeautoplayto the audio player.
– Cryptopat
Nov 22 at 19:24
That won't work. I already tried that.
– J Dawg
Nov 22 at 19:24
Is your audio playing after pressing play?
– Cryptopat
Nov 22 at 19:26
Yes, but I'm trying to get it to play before anything is pressed. This Code is set up differently. jsfiddle.net/pezuLqvo/142 Audio should start playing first before it is clicked.
– J Dawg
Nov 22 at 19:27
1
There must be a way to do it, even if I was using a regular mp3 stream. Just because it's shputcast shouldn't make a difference. Maybe someone else would be able to figure it out.
– J Dawg
Nov 22 at 19:53
|
show 7 more comments
Just add the attributeautoplayto the audio player.
– Cryptopat
Nov 22 at 19:24
That won't work. I already tried that.
– J Dawg
Nov 22 at 19:24
Is your audio playing after pressing play?
– Cryptopat
Nov 22 at 19:26
Yes, but I'm trying to get it to play before anything is pressed. This Code is set up differently. jsfiddle.net/pezuLqvo/142 Audio should start playing first before it is clicked.
– J Dawg
Nov 22 at 19:27
1
There must be a way to do it, even if I was using a regular mp3 stream. Just because it's shputcast shouldn't make a difference. Maybe someone else would be able to figure it out.
– J Dawg
Nov 22 at 19:53
Just add the attribute
autoplay to the audio player.– Cryptopat
Nov 22 at 19:24
Just add the attribute
autoplay to the audio player.– Cryptopat
Nov 22 at 19:24
That won't work. I already tried that.
– J Dawg
Nov 22 at 19:24
That won't work. I already tried that.
– J Dawg
Nov 22 at 19:24
Is your audio playing after pressing play?
– Cryptopat
Nov 22 at 19:26
Is your audio playing after pressing play?
– Cryptopat
Nov 22 at 19:26
Yes, but I'm trying to get it to play before anything is pressed. This Code is set up differently. jsfiddle.net/pezuLqvo/142 Audio should start playing first before it is clicked.
– J Dawg
Nov 22 at 19:27
Yes, but I'm trying to get it to play before anything is pressed. This Code is set up differently. jsfiddle.net/pezuLqvo/142 Audio should start playing first before it is clicked.
– J Dawg
Nov 22 at 19:27
1
1
There must be a way to do it, even if I was using a regular mp3 stream. Just because it's shputcast shouldn't make a difference. Maybe someone else would be able to figure it out.
– J Dawg
Nov 22 at 19:53
There must be a way to do it, even if I was using a regular mp3 stream. Just because it's shputcast shouldn't make a difference. Maybe someone else would be able to figure it out.
– J Dawg
Nov 22 at 19:53
|
show 7 more comments
1 Answer
1
active
oldest
votes
1
Your listener is based on click event, by doing <svg class="play hide"... only apply CSS style an no event happen.
you need to rewrite initButton() function and check the player state
function initButton(selector) {
const wrapper = document.querySelector(selector);
wrapper.addEventListener("click", playButtonClickHandler);
if (isPlaying(wrapper)) {
manageAudio(getAudio(), {
src: wrapper.getAttribute("data-audio"),
playing: false
})
}
}
answered Dec 6 at 6:25
ewwink
10k22236
Can you provide a jsfiddle with your changes in the code please?
– J Dawg
Dec 6 at 13:18
1
the change only ininitButton()but here jsfiddle
– ewwink
Dec 6 at 13:23
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53436351%2ftrying-to-get-the-audio-to-start-playing-first%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
Your listener is based on click event, by doing <svg class="play hide"... only apply CSS style an no event happen.
you need to rewrite initButton() function and check the player state
function initButton(selector) {
const wrapper = document.querySelector(selector);
wrapper.addEventListener("click", playButtonClickHandler);
if (isPlaying(wrapper)) {
manageAudio(getAudio(), {
src: wrapper.getAttribute("data-audio"),
playing: false
})
}
}
answered Dec 6 at 6:25
ewwink
10k22236
Can you provide a jsfiddle with your changes in the code please?
– J Dawg
Dec 6 at 13:18
1
the change only ininitButton()but here jsfiddle
– ewwink
Dec 6 at 13:23
add a comment |
1
Your listener is based on click event, by doing <svg class="play hide"... only apply CSS style an no event happen.
you need to rewrite initButton() function and check the player state
function initButton(selector) {
const wrapper = document.querySelector(selector);
wrapper.addEventListener("click", playButtonClickHandler);
if (isPlaying(wrapper)) {
manageAudio(getAudio(), {
src: wrapper.getAttribute("data-audio"),
playing: false
})
}
}
answered Dec 6 at 6:25
ewwink
10k22236
Can you provide a jsfiddle with your changes in the code please?
– J Dawg
Dec 6 at 13:18
1
the change only ininitButton()but here jsfiddle
– ewwink
Dec 6 at 13:23
add a comment |
1
1
1
Your listener is based on click event, by doing <svg class="play hide"... only apply CSS style an no event happen.
you need to rewrite initButton() function and check the player state
function initButton(selector) {
const wrapper = document.querySelector(selector);
wrapper.addEventListener("click", playButtonClickHandler);
if (isPlaying(wrapper)) {
manageAudio(getAudio(), {
src: wrapper.getAttribute("data-audio"),
playing: false
})
}
}
answered Dec 6 at 6:25
ewwink
10k22236
Your listener is based on click event, by doing <svg class="play hide"... only apply CSS style an no event happen.
you need to rewrite initButton() function and check the player state
function initButton(selector) {
const wrapper = document.querySelector(selector);
wrapper.addEventListener("click", playButtonClickHandler);
if (isPlaying(wrapper)) {
manageAudio(getAudio(), {
src: wrapper.getAttribute("data-audio"),
playing: false
})
}
}
answered Dec 6 at 6:25
ewwink
10k22236
answered Dec 6 at 6:25
ewwink
10k22236
answered Dec 6 at 6:25
ewwink
10k22236
answered Dec 6 at 6:25
ewwink
10k22236
10k22236
Can you provide a jsfiddle with your changes in the code please?
– J Dawg
Dec 6 at 13:18
1
the change only ininitButton()but here jsfiddle
– ewwink
Dec 6 at 13:23
add a comment |
Can you provide a jsfiddle with your changes in the code please?
– J Dawg
Dec 6 at 13:18
1
the change only ininitButton()but here jsfiddle
– ewwink
Dec 6 at 13:23
Can you provide a jsfiddle with your changes in the code please?
– J Dawg
Dec 6 at 13:18
Can you provide a jsfiddle with your changes in the code please?
– J Dawg
Dec 6 at 13:18
1
1
the change only in
initButton() but here jsfiddle– ewwink
Dec 6 at 13:23
the change only in
initButton() but here jsfiddle– ewwink
Dec 6 at 13:23
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53436351%2ftrying-to-get-the-audio-to-start-playing-first%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Just add the attribute
autoplayto the audio player.– Cryptopat
Nov 22 at 19:24
That won't work. I already tried that.
– J Dawg
Nov 22 at 19:24
Is your audio playing after pressing play?
– Cryptopat
Nov 22 at 19:26
Yes, but I'm trying to get it to play before anything is pressed. This Code is set up differently. jsfiddle.net/pezuLqvo/142 Audio should start playing first before it is clicked.
– J Dawg
Nov 22 at 19:27
1
There must be a way to do it, even if I was using a regular mp3 stream. Just because it's shputcast shouldn't make a difference. Maybe someone else would be able to figure it out.
– J Dawg
Nov 22 at 19:53