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>