关于audio标签播放跨域的问题

最新推荐文章于 2024-01-18 10:40:20 发布

转载

最新推荐文章于 2024-01-18 10:40:20 发布 · 3.6k 阅读

音频播放遇到跨域问题，audio标签是否能跨域取决于源服务器的响应头设置。通过Apache或IIS配置允许跨域请求，如Apache中需在VirtualHost或Directory节点下设置Header，以实现跨域播放。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

遇到过的错误:

DOMException: The play() request was interrupted by a new load request.

DOMException: Failed to load because no supported source was found.

到底这个标签的src可以跨域吗?

先看一个例子: (浏览器也有差异,IE浏览器都可以播放)

<audio id="musicplayer" preload="auto" >
    <source src="m.mp3" type="audio/mpeg"

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_34008933

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

HTML5 音频 Audio 标签详解

一名全栈开发工程师

05-31

1万+

HTML5 引入了标签，允许开发者在网页中直接嵌入音频文件，而不需要依赖第三方插件。

audio 标签动态src 且src是http无法播放问题

weixin_43907110的博客

10-30

1899

注意如果，src跟本项目地址IP端口协议不同，会出现跨域问题。audio标签本身是允许跨域的资源的，但是如果src资源本身所在服务不允许跨域就会出现，直接访问文件地址能够播放，但是放到audio里面就无法播放的问题，这个有两个解决方法。无法播放因为动态src需要在赋值后对audio进行重载。不在audio里面去播放跨域的音频。直接用a标签连接打开新的浏览器页签。让资源服务器允许跨域。

1 条评论您还未登录，请先登录后发表或查看评论

vue 播放器开发获取音频数据流，CORS跨域限制的问题

weixin_44624120的博客

07-22

4865

记录一下在开发自己项目遇到的问题 CORS跨域限制的问题 MediaElementAudioSource outputs zeroes due to CORS access restrictions //在浏览器上报的错误找了半天终于在某论坛上看到了救星：在audio标签有src链接的同时设置上属性 rossOrigin=“anonymous”; 在html不要直接写地址，让浏览器一开始加载就就直接跨域了，所以如果写了得设置audio标签这个属性（crossOrigin=‘anonymous’;

解决Image在canvas以及audio、video在AudioContext下跨域问题

SHY15651907150的博客

11-11

710

媒体元素嘛，在对应的标签或对象上加上crossOrigin = 'anonymous' 即可。例如 Image 在canvas 上绘制时会跨域： <img crossOrigin="anonymous" src="your Image url"></img> 如果并非页面上的元素而是利用 Image 对象的的话： const img = n...

DOMException: Failed to load because no supported source was found.

m0_73198832的博客

03-01

4761

DOMException: Failed to load because no supported source was found.（关于video播放）

audio标签播放报错

最新发布

01-16

### HTML Audio 标签播放报错解决方案当遇到 `audio` 标签设置 `autoplay` 属性无效或调用 JavaScript 的 `play()` 方法时报出如下错误： ```plaintext Uncaught (in promise) DOMException ``` 此问题通常发生...

前端后端跨域问题

01-02

HTML5引入了`<video>`和`<audio>`标签，使得嵌入和播放多媒体内容变得非常简单。通过`controls`属性，可以轻松添加播放/暂停和音量控制等操作。 #### Canvas绘图 `<canvas>`标签提供了一个在网页中绘制图形的容器。...

HTML5 Video/Audio播放本地文件示例介绍

09-28

它首先获取到`<input type="file">`中的第一个文件，然后创建一个Blob URL，并将这个URL赋值给`<audio>`标签的`src`属性，从而实现本地文件的播放。需要注意的是，这种方法并非所有浏览器都支持。在Chrome 30和...

Uncaught (in promise) DOMException: The play() request was interrupted by a new load request.

HGGshiwo的博客

01-11

1万+

原因是：video.play是一个promise，因此错误需要在结束以后catch。然后再次调用play函数即可。

Uncaught (in promise) DOMException: The play() request was interrupted by a new load request.异常处理

Yeats_Liao的博客

01-18

4603

Uncaught (in promise) DOMException: The play() request was interrupted by a new load request.异常处理

HTML5视频播放器video和音频播放器audio用法

依韵

04-26

2604

原文：http://www.webhek.com/using_html5_audio_and_videoHTML5里引入的新标记 <audio> 和 <video> 实现了HTML对视频播放和音频播放的原生支持，有了这种原生的HTML5视频播放器/音频播放器，我们不再需要flash技术，而直接能将视频/音频嵌入到了网页中。如何嵌入视频和音频在网页里嵌入HTML5音频播放器和视频播放器的方法非常简单：

video或audio标签加载本地资源不能播放问题

6块腹肌的博客

09-24

6831

因为安全性的问题，js是没有权限直接访问本地资源的，所以直接将资源的相对路径或者绝对路径给src都不能播放视频音频。可以使用URL.createObjectURL来进行处理，如下vue实例： <input type="file" @change="upload"> <video controls :src="mp4URL"></video> <scr...

vue audio标签引入本地音频无法播放的问题

oihezz的博客

09-04

6127

无法播放： <audio src="../../audio/audio1.mp3" controls></audio> 可以播放： <audio controls> <source src="../../audio/audio1.mp3" /> </audio>

修复The play() request was interrupted等系列问题

wzp20092009的博客

10-08

1万+

在网页端播放媒体，如video、audio等标签，在频繁切换组件播放时经常出现The play() request was interrupted等错误提示，可以延时执行修复该问题

vue内引入语音播报功能

weixin_34379433的博客

08-14

1612

为什么80%的码农都做不了架构师？>>> ...

Chrome浏览器出现No compatible source was found for this video.解决方法

qq_42417385的博客

11-22

4万+

Chrome浏览器出现No compatible source was found for this video.解决方法 Chrome浏览器出现No compatible source was found for this video 解决方案： 1.将文件放到服务器上，就是别用本地文件的方式打开 https://download.csdn.net/download/qq_42417385/1...

HTML5摇一摇以及音频播放问题优化总结