英文:
CORS error playing mp3 from another website
问题
我有一个问题,我的React应用程序无法播放来自另一个源的音频,出现CORS错误。
示例:https://audio.podigee-cdn.net/1041740-m-0fcf92e897e7cd93200a43cf103a75fb.mp3
奇怪的是,当我访问https://www.w3schools.com/tags/tag_audio.asp,输入上面的URL并点击播放时,它可以正常工作。
在我的本地React应用程序中,我得到了一个302状态和一个随后的重定向。音频标签包含crossOrigin="anonymous"以及src元素中的URL。
在W3Schools上,它以某种方式进行重定向,我只从重定向的URL得到状态206。
如何重现:
- 克隆https://github.com/SamTV12345/PodFetch.git
- 按照“构建”部分的README说明进行操作
- git checkout origin/develop
- 添加任何具有超过5集的播客。
- 单击CloudIcon
英文:
I have the problem that my React application does not play audio from another source with a CORS error.
Sample: https://audio.podigee-cdn.net/1041740-m-0fcf92e897e7cd93200a43cf103a75fb.mp3
Weirdly enough when I go to https://www.w3schools.com/tags/tag_audio.asp, enter the url from above and click play it works.
On my local React application I get a 302 status and a redirect subsequently.The audio tag contains a crossOrigin="anonymous" and the url in the src element.
On W3Schools it does somehow the redirect and I only get a status 206 from the redirected url.
How to reproduce:
- git clone https://github.com/SamTV12345/PodFetch.git
- Follow the README description in the Building section
- git checkout origin/develop
- Add any podcast with more than 5 episodes.
- Click on the CloudIcon
答案1
得分: 1
你需要通过new Audio(url)
导入mp3 URL,而不是使用XMLHttpRequest
以避免CORS问题。例如:
class PlaySound extends React.Component {
constructor(props) {
super(props);
this.state = {
play: false
};
this.url = "https://audio.podigee-cdn.net/1041740-m-0fcf92e897e7cd93200a43cf103a75fb.mp3";
this.audio = new Audio(this.url);
this.togglePlay = this.togglePlay.bind(this);
}
togglePlay() {
const wasPlaying = this.state.play;
this.setState({
play: !wasPlaying
});
if (wasPlaying) {
this.audio.pause();
} else {
this.audio.play();
setInterval(() => {
console.clear();
let seconds = new Date().getSeconds();
let points = '.'.repeat(seconds % 4);
console.log(`Loading audio${points}`);
}, 1000);
}
}
render() {
return (
<div>
<button
id="audioBtn"
onClick={this.togglePlay} onCanPlay={this.detectPlay}> {this.state.play ? "暂停" : "播放"}
</button>
</div>
);
}
}
ReactDOM.render(<PlaySound />, document.getElementById("root"));
CORS问题的示例使用Ajax:
let audio = document.querySelector('#myAudio');
function playAudio() {
audio.play();
}
function pauseAudio() {
audio.pause();
}
$.ajax({
url: 'https://audio.podigee-cdn.net/1041740-m-0fcf92e897e7cd93200a43cf103a75fb.mp3',
success: (res) => {
audio.srcObject = URL.createObjectURL(res);
},
error: (err) => {
console.error('CORS错误。请查看浏览器控制台以获取详细信息。');
}
});
英文:
You need to import the mp3 URL through new Audio(url)
instead of XMLHttpRequest
to avoid CORS. For example :
<!-- begin snippet: js hide: false console: true babel: true -->
<!-- language: lang-js -->
class PlaySound extends React.Component {
constructor(props) {
super(props);
this.state = {
play: false
};
this.url = "https://audio.podigee-cdn.net/1041740-m-0fcf92e897e7cd93200a43cf103a75fb.mp3";
this.audio = new Audio(this.url);
this.togglePlay = this.togglePlay.bind(this);
}
togglePlay() {
const wasPlaying = this.state.play;
this.setState({
play: !wasPlaying
});
if (wasPlaying) {
this.audio.pause();
} else {
this.audio.play();
setInterval(()=>{
console.clear();
let seconds = new Date().getSeconds();
let points = '.'.repeat(seconds % 4);
console.log(`Loading audio${points}`);
}, 1000);
}
}
render() {
return (
<div>
<button
id="audioBtn"
onClick={this.togglePlay} onCanPlay={this.detectPlay}> {this.state.play ? "Pause" : "Play"}
</button>
</div>
);
}
}
ReactDOM.render(<PlaySound />, document.getElementById("root"));
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
<!-- end snippet -->
Example occurrence of CORS with using Ajax:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
let audio = document.querySelector('#myAudio');
function playAudio() {
audio.play();
}
function pauseAudio() {
audio.pause();
}
$.ajax({
url: 'https://audio.podigee-cdn.net/1041740-m-0fcf92e897e7cd93200a43cf103a75fb.mp3',
success: (res) => {
audio.srcObject = URL.createObjectURL(res);
},
error: (err) => {
console.error('CORS Error. See browser console for detail.');
}
});
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<audio id="myAudio"></audio>
<button onclick="playAudio()" type="button">Play Audio</button>
<button onclick="pauseAudio()" type="button">Pause Audio</button>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论