ayaysir/view.htm

## view.htm
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>주파수 그리기</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }

        canvas {
            border: none;
            margin: 0px -4px;
            padding: 0px;
        }

        #divOnCanvas {
            position: absolute;
            padding: inherit;
            left: 300px;
            top: 0px;
            width: 500px;
            height: 300px;
        }

        #playBtn {
            float: left;
        }


        #metaHeader {
            display: inline
        }

        #artist {
            font-size: 15px;
            vertical-align: bottom;
        }

        #title {
            font-size: 30px;
            vertical-align: top;
        }

        #playBtn {
            border: none;
            color: none;
        }

        .timelabel {
            display: inline-block;
            /*컨텐츠 너비에 맞추기*/
            font-size: 14px;
            background-color: rgba(0, 0, 0, 0.65);
            color: white;
        }

        #timeStart {
            position: absolute;
            bottom: 0px;
            left: px;
        }

        #timeEnd {
            position: absolute;
            bottom: 0px;
            right: 0px;
        }

        table {}
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>

<body onload="draw();">
    <div id=playerWrapper>
        <img id=albumArt width=300px height=300px>
        <canvas id="tutorial" width="500" height="300">
            캔버스를 지원하지 않는 브라우저입니다.
        </canvas>
        <div id=divOnCanvas>

            <div id=metaHeader>
                <table>
                    <tr>
                        <td rowspan=2>
                            <button type=button id=playBtn><img id=btnImg width=80px height=80px src="https://image.spreadshirtmedia.com/image-server/v1/mp/designs/1010804667,width=178,height=178/fun-play-button-icon.png"> </button> </td>
                        <td id=artist>Artist</td>
                    </tr>
                    <tr>
                        <td id=title>Title</td>
                    </tr>
                </table>
                <div class=timelabel id=timeStart>00:00</div>
                <div class=timelabel id=timeEnd>5:55</div>
            </div>

        </div>
    </div>

    <p id=loading>로딩중...</p>
    <p>오디오 플레이어 제작 연습중... (2018-11-11)<br>다음 할 일: 그래프 위에 내비게이터 바 만들기, 버튼 투명하게 만들기</p>
    <script>
        $('#playerWrapper').hide();

        Number.prototype.toMS = function(isMillisecond) {
            if(isMillisecond){
                var num = parseInt(this) / 1000
            } else {
                var num = parseInt(this)
            }

            // console.log(num)
            var min = Math.floor(num / 60)
            var sec = Math.floor(num - (min * 60))

            if (min < 10) {
                min = "0" + min;
            }
            if (sec < 10) {
                sec = "0" + sec;
            }
            return min + ":" + sec
        }

        function draw() {
            $.get("pastorale-freq.json", function(data) {
                var canvas = document.getElementById('tutorial')
                if (canvas.getContext) {
                    var ctx = canvas.getContext('2d');
                    console.log(data)
                    $('#albumArt').attr('src', data.imgSrc)
                    $('#tutorial').attr('width', data.totalChunks)
                    //ctx.fillStyle = "rgb(53,253,233)";
                    //선형 그라데이션
                    var grad = ctx.createLinearGradient(0, 200, 200, 0);

                    grad.addColorStop(0, 'rgba(242,246,255,0.5)');
                    grad.addColorStop(1, 'rgba(103,120,128,0.5)');

                    ctx.fillStyle = grad;
                    ctx.fillRect(0, 0, 500, 300)
                    // x는 10 너비에 0부터 10씩 증가, y는 (300 - 길이) 에서 시작
                    var freqArray = data.outputFreqArr
                    console.log(freqArray)
                    var max = data.max
                    for (var i in freqArray) {
                        var colorString = "rgb(" + Math.floor(Math.random() * 200) + "," +
                            Math.floor(Math.random() * 200) + "," + Math.floor(Math.random() * 200) + ")"
                        ctx.fillStyle = colorString
                        ctx.fillRect(i * 1, 300 - (freqArray[i] / max) * 250, 1, (freqArray[i] / max) * 250)
                    }

                    // 오디오
                    var audioState = {
                        0: 'HAVE_NOTHING',
                        1: 'HAVE_METADATA',
                        2: 'HAVE_CURRENT_DATA',
                        3: 'HAVE_FUTURE_DATA',
                        4: 'HAVE_ENOUGH_DATA'
                    }
                    var audio = new Audio('audio/' + data.metadata.mFileName)

                    // 메타데이터
                    $('#artist').text(data.metadata.mTags.author)
                    $('#title').text(data.metadata.mTags.title)
                    console.log(audio.duration)
                    $('#timeEnd').text(data.metadata.mLength.toMS(true))
                    $('#albumArt').attr('title', data.metadata.mTags.album)

                    // 숨겨져 있던 플레이어 표시
                    $('#playerWrapper').show();

                    function changeDuration() {
                        // sl.val(Math.round(audio.currentTime))
                        var currentTimeRound = Math.round(audio.currentTime)
                        $('#timeStart').text(currentTimeRound.toMS())
                    }

                    $('#playBtn').click(function() {
                        if(!audio.paused){
                            audio.pause()
                            $('#btnImg').attr('src', 'https://image.spreadshirtmedia.com/image-server/v1/mp/designs/1010804667,width=178,height=178/fun-play-button-icon.png')
                            return;
                        }
                        $('#btnImg').attr('src', 'https://banner2.kisspng.com/20180412/qle/kisspng-computer-icons-linkedin-desktop-wallpaper-pause-button-5acf7aca975286.4627736315235468266198.jpg')
                        audio.play() // 일시정지 상황은 자동 반영됨
                        timeCounter = setInterval(() => {
                            changeDuration()
                        }, 1000)
                    })


                } else {
                    // canvas-unsupported code here
                }
            })
        }

        var loading = $("#loading");
        $(document).ajaxStart(function() {
            loading.show();
        });

        $(document).ajaxStop(function() {
            loading.hide();
        });
    </script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="ko">

	<head>
	<meta charset="UTF-8">
	<title>주파수 그리기</title>
	<style type="text/css">
	body {
	margin: 0;
	padding: 0;
	}

	canvas {
	border: none;
	margin: 0px -4px;
	padding: 0px;
	}

	#divOnCanvas {
	position: absolute;
	padding: inherit;
	left: 300px;
	top: 0px;
	width: 500px;
	height: 300px;
	}

	#playBtn {
	float: left;
	}


	#metaHeader {
	display: inline
	}

	#artist {
	font-size: 15px;
	vertical-align: bottom;
	}

	#title {
	font-size: 30px;
	vertical-align: top;
	}

	#playBtn {
	border: none;
	color: none;
	}

	.timelabel {
	display: inline-block;
	/컨텐츠 너비에 맞추기/
	font-size: 14px;
	background-color: rgba(0, 0, 0, 0.65);
	color: white;
	}

	#timeStart {
	position: absolute;
	bottom: 0px;
	left: px;
	}

	#timeEnd {
	position: absolute;
	bottom: 0px;
	right: 0px;
	}

	table {}
	</style>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	</head>

	<body onload="draw();">
	<div id=playerWrapper>
	<img id=albumArt width=300px height=300px>
	<canvas id="tutorial" width="500" height="300">
	캔버스를 지원하지 않는 브라우저입니다.
	</canvas>
	<div id=divOnCanvas>

	<div id=metaHeader>
	<table>
	<tr>
	<td rowspan=2>
	<button type=button id=playBtn><img id=btnImg width=80px height=80px src="https://image.spreadshirtmedia.com/image-server/v1/mp/designs/1010804667,width=178,height=178/fun-play-button-icon.png"> </button> </td>
	<td id=artist>Artist</td>
	</tr>
	<tr>
	<td id=title>Title</td>
	</tr>
	</table>
	<div class=timelabel id=timeStart>00:00</div>
	<div class=timelabel id=timeEnd>5:55</div>
	</div>

	</div>
	</div>

	<p id=loading>로딩중...</p>
	<p>오디오 플레이어 제작 연습중... (2018-11-11)<br>다음 할 일: 그래프 위에 내비게이터 바 만들기, 버튼 투명하게 만들기</p>
	<script>
	$('#playerWrapper').hide();

	Number.prototype.toMS = function(isMillisecond) {
	if(isMillisecond){
	var num = parseInt(this) / 1000
	} else {
	var num = parseInt(this)
	}

	// console.log(num)
	var min = Math.floor(num / 60)
	var sec = Math.floor(num - (min * 60))

	if (min < 10) {
	min = "0" + min;
	}
	if (sec < 10) {
	sec = "0" + sec;
	}
	return min + ":" + sec
	}

	function draw() {
	$.get("pastorale-freq.json", function(data) {
	var canvas = document.getElementById('tutorial')
	if (canvas.getContext) {
	var ctx = canvas.getContext('2d');
	console.log(data)
	$('#albumArt').attr('src', data.imgSrc)
	$('#tutorial').attr('width', data.totalChunks)
	//ctx.fillStyle = "rgb(53,253,233)";
	//선형 그라데이션
	var grad = ctx.createLinearGradient(0, 200, 200, 0);

	grad.addColorStop(0, 'rgba(242,246,255,0.5)');
	grad.addColorStop(1, 'rgba(103,120,128,0.5)');

	ctx.fillStyle = grad;
	ctx.fillRect(0, 0, 500, 300)
	// x는 10 너비에 0부터 10씩 증가, y는 (300 - 길이) 에서 시작
	var freqArray = data.outputFreqArr
	console.log(freqArray)
	var max = data.max
	for (var i in freqArray) {
	var colorString = "rgb(" + Math.floor(Math.random() * 200) + "," +
	Math.floor(Math.random() * 200) + "," + Math.floor(Math.random() * 200) + ")"
	ctx.fillStyle = colorString
	ctx.fillRect(i * 1, 300 - (freqArray[i] / max) * 250, 1, (freqArray[i] / max) * 250)
	}

	// 오디오
	var audioState = {
	0: 'HAVE_NOTHING',
	1: 'HAVE_METADATA',
	2: 'HAVE_CURRENT_DATA',
	3: 'HAVE_FUTURE_DATA',
	4: 'HAVE_ENOUGH_DATA'
	}
	var audio = new Audio('audio/' + data.metadata.mFileName)

	// 메타데이터
	$('#artist').text(data.metadata.mTags.author)
	$('#title').text(data.metadata.mTags.title)
	console.log(audio.duration)
	$('#timeEnd').text(data.metadata.mLength.toMS(true))
	$('#albumArt').attr('title', data.metadata.mTags.album)

	// 숨겨져 있던 플레이어 표시
	$('#playerWrapper').show();

	function changeDuration() {
	// sl.val(Math.round(audio.currentTime))
	var currentTimeRound = Math.round(audio.currentTime)
	$('#timeStart').text(currentTimeRound.toMS())
	}

	$('#playBtn').click(function() {
	if(!audio.paused){
	audio.pause()
	$('#btnImg').attr('src', 'https://image.spreadshirtmedia.com/image-server/v1/mp/designs/1010804667,width=178,height=178/fun-play-button-icon.png')
	return;
	}
	$('#btnImg').attr('src', 'https://banner2.kisspng.com/20180412/qle/kisspng-computer-icons-linkedin-desktop-wallpaper-pause-button-5acf7aca975286.4627736315235468266198.jpg')
	audio.play() // 일시정지 상황은 자동 반영됨
	timeCounter = setInterval(() => {
	changeDuration()
	}, 1000)
	})


	} else {
	// canvas-unsupported code here
	}
	})
	}

	var loading = $("#loading");
	$(document).ajaxStart(function() {
	loading.show();
	});

	$(document).ajaxStop(function() {
	loading.hide();
	});
	</script>
	</body>

	</html>