basictomonokai/wavtomp3.html

## wavtomp3.html


<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Radio</title>


<style>
body {
   font-family: "Rounded Mplus 1c";
   font-size: 100%;
   color: #ecf0f1;
   background: #27ae60;
}

#kkaf {
   font-size: 1.5em;
   margin: 10px;
}


#buttonx {
  width:190px;
  color:#ffffff;
  background:#e67e22;
  font-family: fantasy,sans-serif;
  font-size:24px;
  text-shadow:0 1px 0px #143352,0 2px 0px #143352;
  text-align:center;
  display:inline-block;
  text-decoration:none;
  border:1px solid #225588;
  padding:5px 0 2px 0;
  border-radius:5px;
  margin-bottom:20px;
  margin-left:10px;
  opacity: 0.7;
}


div#footer-fixed
{
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 70px;
}


div#body-bk{
    padding: 0px 0 80px 0;    /* 荳九↓80px繧剃ｽ咏區繧貞叙繧? */
}


</style>
<script src="https://unpkg.com/@ffmpeg/ffmpeg@0.8.3/dist/ffmpeg.min.js"></script>

</head>

<body>

  <!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  <title>Radio</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

</head>

<body>

     <h1>RADIO</h1>


<div id="body-bk">

<div id="kkaf">

<input type="file" id="file" name="file"/ accept="audio/*">

<div>
<audio id="output-audio" controls>
</audio>
</div>

</div>

</div>

<div id="footer-fixed">

<a id="buttonx" onmouseover="this.style.background='#e67e22'" onmouseout="this.style.background='#d35400'" onclick="this.style.background='#e74c3c';javascript:location.reload()">リロード</a>


</div>


<script>
  const audio = document.getElementById('output-audio');
  const { createFFmpeg } = FFmpeg;
  const ffmpeg = createFFmpeg({ log: true });

  let kka;
//ファイル選択ボタン

var el2 = document.getElementById("file");

el2.addEventListener( 'change', function(e) {

    var result = e.target.files[0];
    aaresult=e.target.files[0];

    //FileReaderのインスタンスを作成する
    var reader = new FileReader();

    //読み込んだファイルの中身を取得する
    reader.readAsDataURL( result );

    //ファイルの中身を取得後に処理を行う
    reader.addEventListener( 'load', function() {

        //ファイルの中身をエディター内に表示する
        //console.log(reader.result);
        (async () => {
              await ffmpeg.load();
              await ffmpeg.transcode(reader.result, "output.mp3", "");
              await console.log('aaa');
              data = await ffmpeg.read('output.mp3');
              await console.log(data);

              await ffmpeg.remove('output.mp3');

              audio.src = URL.createObjectURL(new Blob([data.buffer], {
                type: 'audio/mp3'
              }));


        })();
        //editor.setValue(reader.result);
    })

})
</script>


</body>

</html>


	<!DOCTYPE html>
	<html lang="en" >

	<head>
	<meta charset="UTF-8">
	<title>Radio</title>



	<style>
	body {
	font-family: "Rounded Mplus 1c";
	font-size: 100%;
	color: #ecf0f1;
	background: #27ae60;
	}

	#kkaf {
	font-size: 1.5em;
	margin: 10px;
	}


	#buttonx {
	width:190px;
	color:#ffffff;
	background:#e67e22;
	font-family: fantasy,sans-serif;
	font-size:24px;
	text-shadow:0 1px 0px #143352,0 2px 0px #143352;
	text-align:center;
	display:inline-block;
	text-decoration:none;
	border:1px solid #225588;
	padding:5px 0 2px 0;
	border-radius:5px;
	margin-bottom:20px;
	margin-left:10px;
	opacity: 0.7;
	}


	div#footer-fixed
	{
	position: fixed;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 70px;
	}


	div#body-bk{
	padding: 0px 0 80px 0; /* 荳九↓80px繧剃ｽ咏區繧貞叙繧? */
	}





	</style>
	<script src="https://unpkg.com/@ffmpeg/ffmpeg@0.8.3/dist/ffmpeg.min.js"></script>

	</head>

	<body>

	<!DOCTYPE html>
	<html lang="en" >

	<head>

	<meta charset="UTF-8">
	<title>Radio</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

	</head>

	<body>

	<h1>RADIO</h1>



	<div id="body-bk">

	<div id="kkaf">

	<input type="file" id="file" name="file"/ accept="audio/*">

	<div>
	<audio id="output-audio" controls>
	</audio>
	</div>

	</div>

	</div>

	<div id="footer-fixed">

	<a id="buttonx" onmouseover="this.style.background='#e67e22'" onmouseout="this.style.background='#d35400'" onclick="this.style.background='#e74c3c';javascript:location.reload()">リロード</a>



	</div>



	<script>
	const audio = document.getElementById('output-audio');
	const { createFFmpeg } = FFmpeg;
	const ffmpeg = createFFmpeg({ log: true });

	let kka;
	//ファイル選択ボタン

	var el2 = document.getElementById("file");

	el2.addEventListener( 'change', function(e) {

	var result = e.target.files[0];
	aaresult=e.target.files[0];

	//FileReaderのインスタンスを作成する
	var reader = new FileReader();

	//読み込んだファイルの中身を取得する
	reader.readAsDataURL( result );

	//ファイルの中身を取得後に処理を行う
	reader.addEventListener( 'load', function() {

	//ファイルの中身をエディター内に表示する
	//console.log(reader.result);
	(async () => {
	await ffmpeg.load();
	await ffmpeg.transcode(reader.result, "output.mp3", "");
	await console.log('aaa');
	data = await ffmpeg.read('output.mp3');
	await console.log(data);

	await ffmpeg.remove('output.mp3');

	audio.src = URL.createObjectURL(new Blob([data.buffer], {
	type: 'audio/mp3'
	}));


	})();
	//editor.setValue(reader.result);
	})

	})
	</script>


	</body>

	</html>