I was testing changing audio gain of a video. I created a sample HTML page, and the video file is on the same directory as the HTML file. There was no web server; I just created the file on my local disk and opened it with FireFox. The code is below, but when I clicked the button I got
The HTMLMediaElement passed to createMediaElementSource has a cross-origin resource, the node will output silence.
and the audio got muted. How can I fix this? I searched here and found this, and the answer was "The solution is to add crossOrigin="anonymous" attribute to corresponding audio element." but that did not seem to work.
<script crossOrigin="anonymous">
function gain(value)
{
var vid = document.getElementById("testvideo");
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var gainNode = audioCtx.createGain();
gainNode.gain.value = value;
var source = audioCtx.createMediaElementSource(vid);
...
}
</script>
</head>
<body>
<video id="testvideo" width="640", height="360" controls>
<source src="sample.webm" type="video/mp4" crossOrigin="anonymous"/>
</video>
<div>
<button onclick="gain(2)">Gain 2</button>
</div>
I was testing changing audio gain of a video. I created a sample HTML page, and the video file is on the same directory as the HTML file. There was no web server; I just created the file on my local disk and opened it with FireFox. The code is below, but when I clicked the button I got
The HTMLMediaElement passed to createMediaElementSource has a cross-origin resource, the node will output silence.
and the audio got muted. How can I fix this? I searched here and found this, and the answer was "The solution is to add crossOrigin="anonymous" attribute to corresponding audio element." but that did not seem to work.
<script crossOrigin="anonymous">
function gain(value)
{
var vid = document.getElementById("testvideo");
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var gainNode = audioCtx.createGain();
gainNode.gain.value = value;
var source = audioCtx.createMediaElementSource(vid);
...
}
</script>
</head>
<body>
<video id="testvideo" width="640", height="360" controls>
<source src="sample.webm" type="video/mp4" crossOrigin="anonymous"/>
</video>
<div>
<button onclick="gain(2)">Gain 2</button>
</div>
- If I remember well, for me this fixed when I used a live server on my visual studio code. – Albeis Commented Nov 26, 2019 at 8:25
- Did you ever find a solution? The absurd thing is that the video/audio HTML element itself works just fine when you used the file:/// syntax to open the page, but as soon as you try to load the already existing media into JavaScript, it will fail with this CORS errors (resp. only output silence). The only solution I could find was to use a webserver. – sp00n Commented Oct 25, 2024 at 9:32
1 Answer
Reset to default 7not sure if this fixes you but :
here :
Firefox WebAudio createMediaElementSource not working
i had the same error , i put crossorigin in the audio tag and it seems to work :
<div class= fph id=fph align=center>
<canvas id='canvas'></canvas>
<audio crossorigin="anonymous" src="<?php
$toevallegnummer = rand(1,3);
if ($toevallegnummer == 1){echo "https://res.cloudinary./ddxo40bkm/video/upload/v1582653810/alleycat/shorty.ogg";}
if ($toevallegnummer == 2){echo "https://res.cloudinary./ddxo40bkm/video/upload/v1582653811/alleycat/raveretro.ogg";}
if ($toevallegnummer == 3){echo "https://res.cloudinary./ddxo40bkm/video/upload/v1582653811/alleycat/raveretrorevisedloop.ogg";}
?>" id="audio" >audio element not supported</audio>
<script src="dir/dir/somthing.js"></script>
</div>
im not really a pro or anything but maybe this helps , if not you , then mayb someone else
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744713723a4589492.html
评论列表（0条）