How to stream audio file from another domain using jquery ajax avoiding crossdomain policy?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I'm building a web audio player like SoundCloud footer player using jQuery and HTML5 audio tag. The only-one problem is how to stream an audio file from another domain? (This player plugin could be installed in any website with some basic setup in JSON).
This is the console response when trying to stream an audio file:
The expected answers should be in jQuery.
Update: I've tried to use 'crossdomain' html5 attribute and crossDomain property in jQuery.ajax() but no effect.
Thanks a lot.
javascript jquery
asked Nov 16 '18 at 15:08
nael_dnael_d
209
add a comment |
I'm building a web audio player like SoundCloud footer player using jQuery and HTML5 audio tag. The only-one problem is how to stream an audio file from another domain? (This player plugin could be installed in any website with some basic setup in JSON).
This is the console response when trying to stream an audio file:
The expected answers should be in jQuery.
Update: I've tried to use 'crossdomain' html5 attribute and crossDomain property in jQuery.ajax() but no effect.
Thanks a lot.
javascript jquery
asked Nov 16 '18 at 15:08
nael_dnael_d
209
add a comment |
I'm building a web audio player like SoundCloud footer player using jQuery and HTML5 audio tag. The only-one problem is how to stream an audio file from another domain? (This player plugin could be installed in any website with some basic setup in JSON).
This is the console response when trying to stream an audio file:
The expected answers should be in jQuery.
Update: I've tried to use 'crossdomain' html5 attribute and crossDomain property in jQuery.ajax() but no effect.
Thanks a lot.
javascript jquery
asked Nov 16 '18 at 15:08
nael_dnael_d
209
I'm building a web audio player like SoundCloud footer player using jQuery and HTML5 audio tag. The only-one problem is how to stream an audio file from another domain? (This player plugin could be installed in any website with some basic setup in JSON).
This is the console response when trying to stream an audio file:
The expected answers should be in jQuery.
Update: I've tried to use 'crossdomain' html5 attribute and crossDomain property in jQuery.ajax() but no effect.
Thanks a lot.
javascript jquery
javascript jquery
asked Nov 16 '18 at 15:08
nael_dnael_d
209
asked Nov 16 '18 at 15:08
nael_dnael_d
209
asked Nov 16 '18 at 15:08
nael_dnael_d
209
asked Nov 16 '18 at 15:08
nael_dnael_d
209
asked Nov 16 '18 at 15:08
nael_dnael_d
209
209
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
A couple routes...
Firstly, if you're not reading that audio data or doing anything client-side with that audio, you can just use <audio src="..." /> as normal. CORS doesn't come into play until you're actually trying to use script to read that audio. If you're using some sort of special player code... don't. Just use a normal HTML5 <audio> tag or the Audio class.
Next, if you do need to read the raw audio data, either direct from the URL or to record/process the resulting decoded audio, your server must be configured to allow for CORS for this resource. Access-Control-Allow-Origin: * in the response headers is the easiest way to get there, but you should read up on CORS and understand it before proceeding so that you don't accidentally make something insecure on that server.
answered Nov 16 '18 at 15:13
BradBrad
117k29240399
I used ajax to retrieve the audio stream and it works. But when I tried to set the audio link to <audio src="...">, it says that it's been disallowed (as above in the image)
– nael_d
Nov 16 '18 at 15:23
@nael_d Yeah, so don't use AJAX to retrieve the audio stream.
– Brad
Nov 16 '18 at 15:24
okay got it. But please could you tell me how to avoid (or fix) CORS issue? How to make <audio> play the song from outside my website domain? This is my issue.
– nael_d
Nov 16 '18 at 15:27
@nael_d I did... I gave you two ways. One, don't use AJAX. Two, put the appropriateAccess-Control-Allow-Originheaders in the response.
– Brad
Nov 16 '18 at 15:27
1
@nael_d Post a new question, asking about how to enable CORS for your particular webserver. (Undoubtedly it will be closed as a duplicate, because this question comes up every day.)
– Brad
Nov 16 '18 at 15:33
|
show 4 more comments
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
});
}
});
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%2f53340470%2fhow-to-stream-audio-file-from-another-domain-using-jquery-ajax-avoiding-crossdom%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
A couple routes...
Firstly, if you're not reading that audio data or doing anything client-side with that audio, you can just use <audio src="..." /> as normal. CORS doesn't come into play until you're actually trying to use script to read that audio. If you're using some sort of special player code... don't. Just use a normal HTML5 <audio> tag or the Audio class.
Next, if you do need to read the raw audio data, either direct from the URL or to record/process the resulting decoded audio, your server must be configured to allow for CORS for this resource. Access-Control-Allow-Origin: * in the response headers is the easiest way to get there, but you should read up on CORS and understand it before proceeding so that you don't accidentally make something insecure on that server.
answered Nov 16 '18 at 15:13
BradBrad
117k29240399
I used ajax to retrieve the audio stream and it works. But when I tried to set the audio link to <audio src="...">, it says that it's been disallowed (as above in the image)
– nael_d
Nov 16 '18 at 15:23
@nael_d Yeah, so don't use AJAX to retrieve the audio stream.
– Brad
Nov 16 '18 at 15:24
okay got it. But please could you tell me how to avoid (or fix) CORS issue? How to make <audio> play the song from outside my website domain? This is my issue.
– nael_d
Nov 16 '18 at 15:27
@nael_d I did... I gave you two ways. One, don't use AJAX. Two, put the appropriateAccess-Control-Allow-Originheaders in the response.
– Brad
Nov 16 '18 at 15:27
1
@nael_d Post a new question, asking about how to enable CORS for your particular webserver. (Undoubtedly it will be closed as a duplicate, because this question comes up every day.)
– Brad
Nov 16 '18 at 15:33
|
show 4 more comments
A couple routes...
Firstly, if you're not reading that audio data or doing anything client-side with that audio, you can just use <audio src="..." /> as normal. CORS doesn't come into play until you're actually trying to use script to read that audio. If you're using some sort of special player code... don't. Just use a normal HTML5 <audio> tag or the Audio class.
Next, if you do need to read the raw audio data, either direct from the URL or to record/process the resulting decoded audio, your server must be configured to allow for CORS for this resource. Access-Control-Allow-Origin: * in the response headers is the easiest way to get there, but you should read up on CORS and understand it before proceeding so that you don't accidentally make something insecure on that server.
answered Nov 16 '18 at 15:13
BradBrad
117k29240399
I used ajax to retrieve the audio stream and it works. But when I tried to set the audio link to <audio src="...">, it says that it's been disallowed (as above in the image)
– nael_d
Nov 16 '18 at 15:23
@nael_d Yeah, so don't use AJAX to retrieve the audio stream.
– Brad
Nov 16 '18 at 15:24
okay got it. But please could you tell me how to avoid (or fix) CORS issue? How to make <audio> play the song from outside my website domain? This is my issue.
– nael_d
Nov 16 '18 at 15:27
@nael_d I did... I gave you two ways. One, don't use AJAX. Two, put the appropriateAccess-Control-Allow-Originheaders in the response.
– Brad
Nov 16 '18 at 15:27
1
@nael_d Post a new question, asking about how to enable CORS for your particular webserver. (Undoubtedly it will be closed as a duplicate, because this question comes up every day.)
– Brad
Nov 16 '18 at 15:33
|
show 4 more comments
A couple routes...
Firstly, if you're not reading that audio data or doing anything client-side with that audio, you can just use <audio src="..." /> as normal. CORS doesn't come into play until you're actually trying to use script to read that audio. If you're using some sort of special player code... don't. Just use a normal HTML5 <audio> tag or the Audio class.
Next, if you do need to read the raw audio data, either direct from the URL or to record/process the resulting decoded audio, your server must be configured to allow for CORS for this resource. Access-Control-Allow-Origin: * in the response headers is the easiest way to get there, but you should read up on CORS and understand it before proceeding so that you don't accidentally make something insecure on that server.
answered Nov 16 '18 at 15:13
BradBrad
117k29240399
A couple routes...
Firstly, if you're not reading that audio data or doing anything client-side with that audio, you can just use <audio src="..." /> as normal. CORS doesn't come into play until you're actually trying to use script to read that audio. If you're using some sort of special player code... don't. Just use a normal HTML5 <audio> tag or the Audio class.
Next, if you do need to read the raw audio data, either direct from the URL or to record/process the resulting decoded audio, your server must be configured to allow for CORS for this resource. Access-Control-Allow-Origin: * in the response headers is the easiest way to get there, but you should read up on CORS and understand it before proceeding so that you don't accidentally make something insecure on that server.
answered Nov 16 '18 at 15:13
BradBrad
117k29240399
answered Nov 16 '18 at 15:13
BradBrad
117k29240399
answered Nov 16 '18 at 15:13
BradBrad
117k29240399
answered Nov 16 '18 at 15:13
BradBrad
117k29240399
117k29240399
I used ajax to retrieve the audio stream and it works. But when I tried to set the audio link to <audio src="...">, it says that it's been disallowed (as above in the image)
– nael_d
Nov 16 '18 at 15:23
@nael_d Yeah, so don't use AJAX to retrieve the audio stream.
– Brad
Nov 16 '18 at 15:24
okay got it. But please could you tell me how to avoid (or fix) CORS issue? How to make <audio> play the song from outside my website domain? This is my issue.
– nael_d
Nov 16 '18 at 15:27
@nael_d I did... I gave you two ways. One, don't use AJAX. Two, put the appropriateAccess-Control-Allow-Originheaders in the response.
– Brad
Nov 16 '18 at 15:27
1
@nael_d Post a new question, asking about how to enable CORS for your particular webserver. (Undoubtedly it will be closed as a duplicate, because this question comes up every day.)
– Brad
Nov 16 '18 at 15:33
|
show 4 more comments
I used ajax to retrieve the audio stream and it works. But when I tried to set the audio link to <audio src="...">, it says that it's been disallowed (as above in the image)
– nael_d
Nov 16 '18 at 15:23
@nael_d Yeah, so don't use AJAX to retrieve the audio stream.
– Brad
Nov 16 '18 at 15:24
okay got it. But please could you tell me how to avoid (or fix) CORS issue? How to make <audio> play the song from outside my website domain? This is my issue.
– nael_d
Nov 16 '18 at 15:27
@nael_d I did... I gave you two ways. One, don't use AJAX. Two, put the appropriateAccess-Control-Allow-Originheaders in the response.
– Brad
Nov 16 '18 at 15:27
1
@nael_d Post a new question, asking about how to enable CORS for your particular webserver. (Undoubtedly it will be closed as a duplicate, because this question comes up every day.)
– Brad
Nov 16 '18 at 15:33
I used ajax to retrieve the audio stream and it works. But when I tried to set the audio link to <audio src="...">, it says that it's been disallowed (as above in the image)
– nael_d
Nov 16 '18 at 15:23
I used ajax to retrieve the audio stream and it works. But when I tried to set the audio link to <audio src="...">, it says that it's been disallowed (as above in the image)
– nael_d
Nov 16 '18 at 15:23
@nael_d Yeah, so don't use AJAX to retrieve the audio stream.
– Brad
Nov 16 '18 at 15:24
@nael_d Yeah, so don't use AJAX to retrieve the audio stream.
– Brad
Nov 16 '18 at 15:24
okay got it. But please could you tell me how to avoid (or fix) CORS issue? How to make <audio> play the song from outside my website domain? This is my issue.
– nael_d
Nov 16 '18 at 15:27
okay got it. But please could you tell me how to avoid (or fix) CORS issue? How to make <audio> play the song from outside my website domain? This is my issue.
– nael_d
Nov 16 '18 at 15:27
@nael_d I did... I gave you two ways. One, don't use AJAX. Two, put the appropriate
Access-Control-Allow-Origin headers in the response.– Brad
Nov 16 '18 at 15:27
@nael_d I did... I gave you two ways. One, don't use AJAX. Two, put the appropriate
Access-Control-Allow-Origin headers in the response.– Brad
Nov 16 '18 at 15:27
1
1
@nael_d Post a new question, asking about how to enable CORS for your particular webserver. (Undoubtedly it will be closed as a duplicate, because this question comes up every day.)
– Brad
Nov 16 '18 at 15:33
@nael_d Post a new question, asking about how to enable CORS for your particular webserver. (Undoubtedly it will be closed as a duplicate, because this question comes up every day.)
– Brad
Nov 16 '18 at 15:33
|
show 4 more comments
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.
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%2f53340470%2fhow-to-stream-audio-file-from-another-domain-using-jquery-ajax-avoiding-crossdom%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
