I have an audio element on a webpage and I need to add an id tag 'player' to the element. I am using getElementById('player'). The element in quesiton:
Solution 1:
The URL set at <source> element src attribute is not served with CORS headers and is not an .mp3 file.
To avoid
MediaElementAudioSource outputs zeroes due to CORS access restrictions for <URL>
Copy error, you can use fetch(), Body.blob() to fetch a resource which is served with Access-Control-Allow-Origin header, URL.createObjectURL() to convert the Blob to a Blob URL, then set the <audio> element src to the Blob URL.
Note also that <input> tag is self-closing; and filters should be defined globally.
var ctx = window .AudioContext || window .webkitAudioContext ;
var context = new ctx ();
var url = "https://ia600305.us.archive.org/30/items/return_201605/return.mp3" ;
var filters = [];
fetch (url)
.then (response =>blob ())
.then (blob =>var blobURL = URL .createObjectURL (blob);
var mediaElement = document .getElementById ('player' );
mediaElement.src = blobURL;
var sourceNode = context.createMediaElementSource (mediaElement);
[60 , 170 , 350 , 1000 , 3500 , 10000 ].forEach (function (freq, i ) {
var eq = context.createBiquadFilter ();
eq.frequency .value = freq;
eq.type = "peaking" ;
eq.gain .value = 0 ;
filters.push (eq);
});
sourceNode.connect (filters[0 ]);
for (var i = 0 ; i < filters.length - 1 ; i++) {
filters[i].connect (filters[i + 1 ]);
}
filters[filters.length - 1 ].connect (context.destination );
});
function changeGain (sliderVal, nbFilter ) {
var value = parseFloat (sliderVal);
filters[nbFilter].gain .value = value;
var output = document .querySelector ("#gain" + nbFilter);
output.value = value + " dB" ;
}Copy div audio {
display : block;
margin-bottom : 10px ;
}
.eq {
margin : 32px ;
border : 1px solid;
border-radius : 15px ;
background-color : lightGrey;
padding : 10px ;
width : 300px ;
box-shadow : 10px 10px 5px grey;
text-align : center;
font-family : "Open Sans" ;
font-size : 12px ;
}
div .controls :hover {
color : blue;
font-weight : bold;
}
div .controls label {
display : inline-block;
text-align : center;
width : 50px ;
}
div .controls label ,
div .controls input ,
output {
vertical-align : middle;
padding : 0 ;
margin : 0 ;
font-family : "Open Sans" , Verdana, Geneva, sans-serif, sans-serif;
font-size : 12px ;
}Copy <!DOCTYPE html > <html lang ="en" > <head > <meta charset ="UTF-8" > <title > Equalizer with Bi-Quad Filters</title > </head > <body > <div class ="eq" > <audio id ="player" controls crossorigin ="anonymous" loop > </audio > <div class ="controls" > <label > 60Hz</label > <input type ="range" value ="0" step ="1" min ="-30" max ="30" oninput ="changeGain(this.value, 0);" > <output id ="gain0" > 0 dB</output > </div > <div class ="controls" > <label > 170Hz</label > <input type ="range" value ="0" step ="1" min ="-30" max ="30" oninput ="changeGain(this.value, 1);" > <output id ="gain1" > 0 dB</output > </div > <div class ="controls" > <label > 350Hz</label > <input type ="range" value ="0" step ="1" min ="-30" max ="30" oninput ="changeGain(this.value, 2);" > <output id ="gain2" > 0 dB</output > </div > <div class ="controls" > <label > 1000Hz</label > <input type ="range" value ="0" step ="1" min ="-30" max ="30" oninput ="changeGain(this.value, 3);" > <output id ="gain3" > 0 dB</output > </div > <div class ="controls" > <label > 3500Hz</label > <input type ="range" value ="0" step ="1" min ="-30" max ="30" oninput ="changeGain(this.value, 4);" > <output id ="gain4" > 0 dB</output > </div > <div class ="controls" > <label > 10000Hz</label > <input type ="range" value ="0" step ="1" min ="-30" max ="30" oninput ="changeGain(this.value, 5);" > <output id ="gain5" > 0 dB</output > </div > </div > </body > </html > Copy
Post a Comment for "Id Tag Causes Audio To Not Play In Chrome"