서버의 부하에 따라 가속하는 마리오 BGM 플레이어 (html5)
"일을 하면서 항상 직관적으로 서버의 부하 상황을 파악하고 싶다"
이번에는 그런 요구를 실현해 보았습니다.
개요
[1] 서버의 로드 평균을 반환하는 API와,
[2] HTML5의 Audio 태그에서,
서버의 부하에 따라 재생 속도를 바꾸면서 음악이 재생되도록 했습니다.
우선은 이쪽을 봐 주세요↓
htps: //같다. 베/우 14rl3wgV
배경 (코지츠케)
음악 재생 측
html5와 js로 구현했습니다.
덧붙여서, 이것은 어딘가의 서버에 두지 않고 로컬에 있어도 좋습니다.
아래의 설명이 있는 html과 BGM의 소리 데이터가 같은 계층에 있으면 OK.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Load Average Player</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
audio = document.getElementById("bgm");
audio.playbackRate = 1;
document.getElementById("bgm").play();
function checkLA() {
// APIを呼ぶ
$.ajax({
type:"post",
url:"/getLa.php",
data: {
},
contentType: 'application/json',
dataType: "json",
success: function(data) {
$('#current_la').text(data.la);
// テンポの変わり具合をちょっと調整
if (data.la < 0.3) {
document.getElementById("bgm").playbackRate = 1+(data.la/2);
} else {
document.getElementById("bgm").playbackRate = 1+(data.la);
}
}
});
}
setInterval(checkLA,1000);
audio.loop = true;
});
</script>
</head>
<body>
<div>load average： <span id="current_la">0</span></div>
<hr/>
<div id="content">
<audio id="bgm">
<source src="bgm.mp3">
</audio>
</div>
</body>
</html>
1.html5의 audio 태그
우선 이것이군요.
<audio id="bgm">
<source src="bgm.mp3">
</audio>
거의 img 태그 같은 감각으로 사용할 수 있습니다. 소스가 있는 서버에 mp3 데이터를 두고,
src="hoge.mp3"라고 상태로 지정할 뿐.
2.ajax에서 API 두드리는
음, 이것은 좋을 것입니다.
3. 노래 재생 속도 변경
document.getElementById("bgm").playbackRate = 1+(data.la);
재생 속도 바꾸는 것도 매우 간단, 그래, html5라면 (웃음)
playbackRate가 1이면 100% 재생 속도입니다. 이번에는 la의 값을 더합니다.
이번에 해보고 굉장하다고 생각한 것은, 크롬의 경우 밖에 시도하고 있습니다만,
재생 속도를 주어도 피치가 변하지 않습니다. 이른바 빨리 감기로 큐르큘 ...
높은 소리가 되거나 반대로 슬로우 모션으로 낮은 거인의 목소리처럼 되거나
보통 재생 속도를 바꾸는 것만으로 주파수가 바뀌므로 피치가 바뀔 것입니다.
제대로 피치 그대로 템포만이 바뀌었습니다. 대단해.
이것 각 브라우저 조사해 보고 싶습니다.
4.1초마다 API를 두드리기
setInterval(checkLA,1000);
1000밀리초를 지정.
5. 반복 재생
audio.loop = true;
끝까지 재생할 때 반복할지 여부. 이번 용도에서는 반복입니다.
API 측
<?php
date_default_timezone_set('Asia/Tokyo');
$la = sys_getloadavg();
$json_array = array(
'la' => $la[0],
);
header("Content-Type: text/javascript; charset=utf-8");
echo json_encode($json_array);
?>
php로 로드 애버리지 취득하는 함수 있군요.
이번에는 특별히 매개 변수를받지 않으므로 함수의 값을 json으로 반환합니다.
해봐
일단, 이미지하고 있던 대로의 것은 할 수 있었습니다.
임계값을 넘으면 마리오에서 100초 끊었을 때처럼 해보고 싶습니다.
실제 문제, 직장에서 음악을 흘릴 수는 없지만, 우선 만족 (웃음)!
Reference
이 문제에 관하여(서버의 부하에 따라 가속하는 마리오 BGM 플레이어 (html5)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/nakagawa_shota/items/57fb941066cabb0c151d
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Load Average Player</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
audio = document.getElementById("bgm");
audio.playbackRate = 1;
document.getElementById("bgm").play();
function checkLA() {
// APIを呼ぶ
$.ajax({
type:"post",
url:"/getLa.php",
data: {
},
contentType: 'application/json',
dataType: "json",
success: function(data) {
$('#current_la').text(data.la);
// テンポの変わり具合をちょっと調整
if (data.la < 0.3) {
document.getElementById("bgm").playbackRate = 1+(data.la/2);
} else {
document.getElementById("bgm").playbackRate = 1+(data.la);
}
}
});
}
setInterval(checkLA,1000);
audio.loop = true;
});
</script>
</head>
<body>
<div>load average： <span id="current_la">0</span></div>
<hr/>
<div id="content">
<audio id="bgm">
<source src="bgm.mp3">
</audio>
</div>
</body>
</html>
<audio id="bgm">
<source src="bgm.mp3">
</audio>
document.getElementById("bgm").playbackRate = 1+(data.la);
setInterval(checkLA,1000);
audio.loop = true;
<?php
date_default_timezone_set('Asia/Tokyo');
$la = sys_getloadavg();
$json_array = array(
'la' => $la[0],
);
header("Content-Type: text/javascript; charset=utf-8");
echo json_encode($json_array);
?>
php로 로드 애버리지 취득하는 함수 있군요.
이번에는 특별히 매개 변수를받지 않으므로 함수의 값을 json으로 반환합니다.
해봐
일단, 이미지하고 있던 대로의 것은 할 수 있었습니다.
임계값을 넘으면 마리오에서 100초 끊었을 때처럼 해보고 싶습니다.
실제 문제, 직장에서 음악을 흘릴 수는 없지만, 우선 만족 (웃음)!
Reference
이 문제에 관하여(서버의 부하에 따라 가속하는 마리오 BGM 플레이어 (html5)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/nakagawa_shota/items/57fb941066cabb0c151d
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(서버의 부하에 따라 가속하는 마리오 BGM 플레이어 (html5)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/nakagawa_shota/items/57fb941066cabb0c151d텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
