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

最新推荐文章于 2024-07-31 09:57:55 发布
最新推荐文章于 2024-07-31 09:57:55 发布
阅读量3.3k 收藏 1
点赞数 1
音频播放遇到跨域问题，audio标签是否能跨域取决于源服务器的响应头设置。通过Apache或IIS配置允许跨域请求，如Apache中需在VirtualHost或Directory节点下设置Header，以实现跨域播放。
摘要由CSDN通过智能技术生成

遇到过的错误:

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&
最低0.47元/天 解锁文章
weixin_34008933
关注
audio 标签动态src 且src是http无法播放问题
weixin_43907110的博客
10-30 1277
注意如果，src跟本项目地址IP端口协议不同，会出现跨域问题。audio标签本身是允许跨域的资源的，但是如果src资源本身所在服务不允许跨域就会出现，直接访问文件地址能够播放，但是放到audio里面就无法播放的问题，这个有两个解决方法。无法播放因为动态src需要在赋值后对audio进行重载。不在audio里面去播放跨域的音频。直接用a标签连接打开新的浏览器页签。让资源服务器允许跨域。
vue 播放器开发获取音频数据流，CORS跨域限制的问题
weixin_44624120的博客
07-22 4167
记录一下在开发自己项目遇到的问题 CORS跨域限制的问题 MediaElementAudioSource outputs zeroes due to CORS access restrictions //在浏览器上报的错误 找了半天终于在某论坛上看到了救星： 在audio标签有src链接的同时设置上属性 rossOrigin=“anonymous”; 在html不要直接写地址，让浏览器一开始加载就就直接跨域了，所以如果写了得设置audio标签这个属性（crossOrigin=‘anonymous’;
vue使用video播放视频跨域问题“has been blocked by CORS policy: No ‘Access-Control-Allow-Origin
最新发布
海贼王某人的博客
07-31 698
起因：项目需要加一个视频播放功能，线上资源和网页url不是一个域名，导致跨域了无法播放，报错。我真的服了，网上答案十个九个都是错的，那些人发出来的东西自己都不验证一下吗，多了一个 i 让我好找啊，最后还是解决了，如果你用crossOrign无法解决就把 i 加上吧，我也不知道什么原因，反正的我不加 i 就可以播放了，记录一下这个大坑。注意：是crossOrign=“anonymous”，不是crossOrigin=“anonymous”
解决Image在canvas以及audio、video在AudioContext下跨域问题
SHY15651907150的博客
11-11 627
媒体元素嘛，在对应的标签或对象上加上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 4238
DOMException: Failed to load because no supported source was found.（关于video播放）
Uncaught (in promise) DOMException: The play() request was interrupted by a new load request.
热门推荐
HGGshiwo的博客
01-11 1万+
原因是：video.play是一个promise，因此错误需要在结束以后catch。然后再次调用play函数即可。
前端后端跨域问题
01-02
HTML5引入了`<video>`和`<audio>`标签，使得嵌入和播放多媒体内容变得非常简单。通过`controls`属性，可以轻松添加播放/暂停和音量控制等操作。 #### Canvas绘图 `<canvas>`标签提供了一个在网页中绘制图形的容器。...
HTML5 Video/Audio播放本地文件示例介绍
09-28
它首先获取到`<input type="file">`中的第一个文件，然后创建一个Blob URL，并将这个URL赋值给`<audio>`标签的`src`属性，从而实现本地文件的播放。 需要注意的是，这种方法并非所有浏览器都支持。在Chrome 30和...
6种解决跨域的方案
03-17
当浏览器限制一个源（网站或应用）访问另一个源的资源时，就会出现跨域问题。为了克服这个限制，开发者通常采用多种策略。以下是对标题和描述中提及的6种解决跨域方案的详细解释： 1. **设置响应参数解决跨域**： ...
跨域问题
hhhh
05-02 458
跨域问题 MDN Web Docs 中定义跨域，当一个资源从与该资源本身所在的服务器不同的域或端口不同的域或不同的端口请求一个资源时，资源会发起一个跨域 HTTP 请求。 即访问了一个网站，然后在这个网站返回的资源里面，请求了B网站/端口的资源。 跨域这个情况只会出现在浏览器页面里，因为实际上是浏览器由于安全原因限制了这些请求的访问。 CSRF攻击，如果前端可以跨域，那: 用户访问A,生成cookie存储在本地，点击弹窗广告进入地址B,B网站可以在自己的页面中获取A的cookie,然后模拟用户登录 同源
Uncaught (in promise) DOMException: The play() request was interrupted by a new load request.异常处理
Yeats_Liao的博客
01-18 3449
Uncaught (in promise) DOMException: The play() request was interrupted by a new load request.异常处理
video或audio标签加载本地资源不能播放问题
6块腹肌的博客
09-24 6274
因为安全性的问题，js是没有权限直接访问本地资源的，所以直接将资源的相对路径或者绝对路径给src都不能播放视频音频。可以使用URL.createObjectURL来进行处理，如下vue实例： <input type="file" @change="upload"> <video controls :src="mp4URL"></video> <scr...
解决The play() request was interrupted by a new load request
m0_68094390的博客
05-22 4534
该错误的意思是，播放器正在尝试加载新的媒体，但是此时又收到了一个新的播放请求。为了解决这个问题，你需要在下一个媒体开始加载之前暂停当前的播放，或者阻止重复播放请求。使用一个全局变量来保存播放状态，每次播放时先检查该变量的状态，如果处于播放状态，则不执行播放操作。将播放请求放入队列中，每次只处理队列中的第一个请求，直到当前媒体播放完毕后再处理下一个请求。播放前检查当前是否已有媒体在播放，如果有，则先暂停当前媒体再播放新的媒体。以上方法可以避免同时播放多个媒体造成的冲突，确保播放顺序正常。
HTML5视频播放器video和音频播放器audio用法
依韵
04-26 2500
原文：http://www.webhek.com/using_html5_audio_and_videoHTML5里引入的新标记 <audio> 和 <video> 实现了HTML对视频播放和音频播放的原生支持，有了这种原生的HTML5视频播放器/音频播放器，我们不再需要flash技术，而直接能将视频/音频嵌入到了网页中。如何嵌入视频和音频在网页里嵌入HTML5音频播放器和视频播放器的方法非常简单：
vue audio标签引入本地音频无法播放的问题
oihezz的博客
09-04 5834
无法播放： <audio src="../../audio/audio1.mp3" controls></audio> 可以播放： <audio controls> <source src="../../audio/audio1.mp3" /> </audio>
修复The play() request was interrupted等系列问题
wzp20092009的博客
10-08 7208
在网页端播放媒体，如video、audio等标签，在频繁切换组件播放时经常出现The play() request was interrupted等错误提示，可以延时执行修复该问题
vue内引入语音播报功能
weixin_34379433的博客
08-14 1529
为什么80%的码农都做不了架构师？>>> ...
HTML5使用Audio标签实现歌词同步的效果
05-03
HTML5的Audio标签可以用于播放音频文件，并且可以结合JavaScript来实现歌词同步的效果。具体实现步骤如下： 1. 在HTML页面中添加Audio标签，设置src属性为音频文件的URL。 ```html <audio id="audio" src="music.mp3"></audio> ``` 2. 在HTML页面中添加一个用于显示歌词的元素，比如一个div标签。 ```html <div id="lyrics"></div> ``` 3. 编写JavaScript代码来解析歌词文件，并将歌词显示在页面上。假设歌词文件的格式为每行一句歌词，每句歌词的时间戳格式为[mm:ss.xx]，其中mm表示分钟，ss表示秒，xx表示毫秒。代码如下： ```javascript var lyrics = document.getElementById("lyrics"); var audio = document.getElementById("audio"); // 解析歌词文件，得到一个数组，每个元素包含歌词和时间戳 var lrc = parseLrc(lrcFile); // 当音频播放时，更新歌词 audio.addEventListener("timeupdate", function() { var currentTime = audio.currentTime; for (var i = 0; i < lrc.length; i++) { if (currentTime > lrc[i].time && (!lrc[i+1] || currentTime < lrc[i+1].time)) { // 显示当前歌词 lyrics.innerHTML = lrc[i].lyric; } } }); // 解析歌词文件 function parseLrc(lrcFile) { var lines = lrcFile.split("\n"); var lrc = []; for (var i = 0; i < lines.length; i++) { var match = /\[(\d{2}):(\d{2})\.(\d{2})\](.*)/.exec(lines[i]); if (match) { var time = parseInt(match[1]) * 60 + parseInt(match[2]) + parseInt(match[3]) / 100; var lyric = match[4].trim(); lrc.push({time: time, lyric: lyric}); } } return lrc; } ``` 解析歌词文件的函数parseLrc返回一个包含歌词和时间戳的数组。在音频播放时，通过监听timeupdate事件，获取当前播放时间，然后遍历歌词数组，找到当前时间对应的歌词并显示在页面上。 注意：由于浏览器的安全限制，如果音频文件和歌词文件不在同一个域名下，需要设置跨域访问的响应头。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值