<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>play_mp3.html</title> <link rel="icon" type="image/png" href="img/github-mark.png"> <meta name="description" content="http://127.0.0.1/play_mp3.html"> <meta name="twitter:image" content="img/ag_baboy_right.png" /> <meta name="twitter:image:type" content="png" /> <meta name="twitter:image:width" content="19" /> <meta name="twitter:image:height" content="47" /> <style> body{margin:16px;font-family:monospace;font-size:12pt;background-color:#016;color:#ff0;overflow:hidden;} input{position:relative;top:10px;} </style> </head> <body> <audio id="audio" loop><source id="sour" src="mp3/supergrass.mp3" type="audio/mpeg"></audio> <table id="TA" style="position:absolute;left:10px;top:15px;display:none;"> <tr><td>mp3 vol.: <input id="mp3" type="range" value="0.5" min="0.0" max="1" step="0.1" onchange="mp3vol();" autocomplete="off"></input> <span id="spanA"></span> gain: <input id="gai" type="range" value="1" min="0" max="20" step="1" onchange="mp3gain();" autocomplete="off"></input> <span id="spanB"> </span></td></tr><tr> </table> <button id="BA" onclick="restart();" style="position:absolute;left:80%;top:28px;width:200px;background-color:#900;color:#fff;display:none;">Restart</button> <a id="BV" href="play_mp3.txt" target="_blank" style="position:absolute;left:80%;top:68px;width:200px;background-color:#060;color:#fff;text-align:center;text-decoration:none;border:2px outset #ff0;display:none;">View code</a> <button id="BB" onclick="init();" style="position:absolute;left:40%;top:100px;width:200px;height:90px;background-color:#900;color:#fff;font-size:41px;display:;z-index:2;">Start</button> <input id="vemmp3file" style="position:absolute;top:28px;left:600px;display:none;" type="file" accept=".mp3" autocomplete="off"></input> <div id="mp3file" style="position:absolute;left:672px;top:31px;width:300px;font-size:11pt;background-color:#016;display:none"></div> <script> var sim=0; var bId=function(id){return document.getElementById(id);} var audio=bId("audio"); var mp3val=bId("mp3"); var mgain=bId("gai"); var dspanA=bId("spanA"); var dspanB=bId("spanB"); var dBA=bId("BA"); var dBB=bId("BB"); var dTA=bId("TA"); var dBV=bId("BV"); var dvemmp3file=bId("vemmp3file"); var dmp3file=bId("mp3file"); var dsour=bId("sour"); audio.load(); // to choose music var fileInput=document.getElementById("vemmp3file"); fileInput.addEventListener("change",event => { const objUrl=URL.createObjectURL(event.target.files[0]);//alert(objUrl); dsour.src=objUrl;; audio.load(); audio.play(); dmp3file.innerText="";dsour.src.substring(dsour.src.lastIndexOf('/')+1); }); var aCtx=null,scopeCanvas=null,gainMP3,source; function restart(){location.href="play_mp3.html";} function init(){setupAudio(scopeCanvas);sim=1;console.clear();dBB.style.display="none";dTA.style.display="";dBA.style.display="";dBV.style.display="";dvemmp3file.style.display="";dmp3file.style.display="";} function setupAudio(obj){ window.AudioContext=window.AudioContext || window.webkitAudioContext; aCtx=new AudioContext(); gainMP3=aCtx.createGain(); gainMP3.connect(aCtx.destination); source=aCtx.createMediaElementSource(audio); source.connect(gainMP3); gainMP3.gain.value=1.0; source.connect(aCtx.destination); audio.play(); gainMP3.gain.value=gainMP3.gain.value-1; } function mp3vol(){dspanA.innerText=mp3val.value;audio.volume=mp3val.value;} function mp3gain(){dspanB.innerText=mgain.value;if(gainMP3){gainMP3.gain.value=mgain.value;}} audio.volume=mp3val.value; dspanA.innerText=mp3val.value; dspanB.innerText=mgain.value; dmp3file.innerText=dsour.src.substring(dsour.src.lastIndexOf('/')+1); </script> </body> </html>