User interaction needed to play audio workaround?

Currently I am working on a html5/js music player application. I have many users on mobile devices that have problems with playing the music. According to many websites you need to have user interaction before you can play audio.

Currently this is how I have programmed my music player.
I have used the onclick attribute to detect taps/clicks on a play button.

<button onclick = "playaudio('song name');">Play</button>

Then I have code for js to resolve a play url.

var http = new XMLHttpRequest();

var url = '/getsong';

var params = 'name='+songname;

http.open('POST', url, true);





http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');



http.onreadystatechange = function() {

    if(http.readyState == 4 && http.status == 200) {

    var snd=document.getElementsByTagName("audio")[0];

    snd.src = http.responseText;

    snd.load();

    snd.play();

    }

}

http.send(params);

This works fine on a computer but on mobile users have to click the pause/play button to start the music. Is there any workaround for the user interaction requirement, because I want to implement a remote play system like Google Cast/Spotify Connect.

Currently I don't have access to the complete code so this is just the core part of the music player.

Also I need to make a playlist feature but due to this, it seems quite impossible to play the next track in the playlist without user interaction.

edited Dec 28 '18 at 3:19

asked Dec 26 '18 at 4:43

Raymond Peng

156

add a comment |

Currently this is how I have programmed my music player.
I have used the onclick attribute to detect taps/clicks on a play button.

<button onclick = "playaudio('song name');">Play</button>

Then I have code for js to resolve a play url.

var http = new XMLHttpRequest();

var url = '/getsong';

var params = 'name='+songname;

http.open('POST', url, true);





http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');



http.onreadystatechange = function() {

    if(http.readyState == 4 && http.status == 200) {

    var snd=document.getElementsByTagName("audio")[0];

    snd.src = http.responseText;

    snd.load();

    snd.play();

    }

}

http.send(params);

Currently I don't have access to the complete code so this is just the core part of the music player.

Also I need to make a playlist feature but due to this, it seems quite impossible to play the next track in the playlist without user interaction.

edited Dec 28 '18 at 3:19

asked Dec 26 '18 at 4:43

Raymond Peng

156

add a comment |

Currently this is how I have programmed my music player.
I have used the onclick attribute to detect taps/clicks on a play button.

<button onclick = "playaudio('song name');">Play</button>

Then I have code for js to resolve a play url.

var http = new XMLHttpRequest();

var url = '/getsong';

var params = 'name='+songname;

http.open('POST', url, true);





http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');



http.onreadystatechange = function() {

    if(http.readyState == 4 && http.status == 200) {

    var snd=document.getElementsByTagName("audio")[0];

    snd.src = http.responseText;

    snd.load();

    snd.play();

    }

}

http.send(params);

Currently I don't have access to the complete code so this is just the core part of the music player.

Also I need to make a playlist feature but due to this, it seems quite impossible to play the next track in the playlist without user interaction.

edited Dec 28 '18 at 3:19

asked Dec 26 '18 at 4:43

Raymond Peng

156

Currently this is how I have programmed my music player.
I have used the onclick attribute to detect taps/clicks on a play button.

<button onclick = "playaudio('song name');">Play</button>

Then I have code for js to resolve a play url.

var http = new XMLHttpRequest();

var url = '/getsong';

var params = 'name='+songname;

http.open('POST', url, true);





http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');



http.onreadystatechange = function() {

    if(http.readyState == 4 && http.status == 200) {

    var snd=document.getElementsByTagName("audio")[0];

    snd.src = http.responseText;

    snd.load();

    snd.play();

    }

}

http.send(params);

Currently I don't have access to the complete code so this is just the core part of the music player.

Also I need to make a playlist feature but due to this, it seems quite impossible to play the next track in the playlist without user interaction.

javascript audio xmlhttprequest html5-audio javascript-audio-api

edited Dec 28 '18 at 3:19

asked Dec 26 '18 at 4:43

Raymond Peng

156

edited Dec 28 '18 at 3:19

asked Dec 26 '18 at 4:43

Raymond Peng

156

edited Dec 28 '18 at 3:19

asked Dec 26 '18 at 4:43

Raymond Peng

156

asked Dec 26 '18 at 4:43

Raymond Peng

156

asked Dec 26 '18 at 4:43

Raymond Peng

156

add a comment |

1 Answer
1

active

oldest

votes

Previously asked question said audio autoplay is not allowed on some mobile browser, you can implement, there are several workarounds.

Audio Tag Autoplay Not working in mobile

And yes, regarding the player, you can opt for an open source HTML5 Player, Amplitude.js which supports playlist as well as next song plays without user interaction based on playlist, you can check a demo on their website

https://521dimensions.com/open-source/amplitudejs

Refer to code on their GitHub:

https://github.com/521dimensions/amplitudejs

answered Dec 28 '18 at 4:02

Sujit Maiti

165

The HTML5 player you gave me seems quite good, and I like the UI. Thank you!
– Raymond Peng
Dec 28 '18 at 4:54

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');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53927506%2fuser-interaction-needed-to-play-audio-workaround%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

Previously asked question said audio autoplay is not allowed on some mobile browser, you can implement, there are several workarounds.

Audio Tag Autoplay Not working in mobile

https://521dimensions.com/open-source/amplitudejs

Refer to code on their GitHub:

https://github.com/521dimensions/amplitudejs

answered Dec 28 '18 at 4:02

Sujit Maiti

165

The HTML5 player you gave me seems quite good, and I like the UI. Thank you!
– Raymond Peng
Dec 28 '18 at 4:54

add a comment |

Previously asked question said audio autoplay is not allowed on some mobile browser, you can implement, there are several workarounds.

Audio Tag Autoplay Not working in mobile

https://521dimensions.com/open-source/amplitudejs

Refer to code on their GitHub:

https://github.com/521dimensions/amplitudejs

answered Dec 28 '18 at 4:02

Sujit Maiti

165

The HTML5 player you gave me seems quite good, and I like the UI. Thank you!
– Raymond Peng
Dec 28 '18 at 4:54

add a comment |

Previously asked question said audio autoplay is not allowed on some mobile browser, you can implement, there are several workarounds.

Audio Tag Autoplay Not working in mobile

https://521dimensions.com/open-source/amplitudejs

Refer to code on their GitHub:

https://github.com/521dimensions/amplitudejs

answered Dec 28 '18 at 4:02

Sujit Maiti

165

Previously asked question said audio autoplay is not allowed on some mobile browser, you can implement, there are several workarounds.

Audio Tag Autoplay Not working in mobile

https://521dimensions.com/open-source/amplitudejs

Refer to code on their GitHub:

https://github.com/521dimensions/amplitudejs

answered Dec 28 '18 at 4:02

Sujit Maiti

165

answered Dec 28 '18 at 4:02

Sujit Maiti

165

answered Dec 28 '18 at 4:02

Sujit Maiti

165

answered Dec 28 '18 at 4:02

Sujit Maiti

165

The HTML5 player you gave me seems quite good, and I like the UI. Thank you!
– Raymond Peng
Dec 28 '18 at 4:54

add a comment |

The HTML5 player you gave me seems quite good, and I like the UI. Thank you!
– Raymond Peng
Dec 28 '18 at 4:54

The HTML5 player you gave me seems quite good, and I like the UI. Thank you!
– Raymond Peng
Dec 28 '18 at 4:54

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');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Bdtjtk