Skip to content

Instantly share code, notes, and snippets.

@MSHADroo

MSHADroo/music.html

Created December 22, 2018 13:35
Show Gist options
  • Save MSHADroo/7c2549fc96673a425ff16b4a19c7e7a1 to your computer and use it in GitHub Desktop.
Save MSHADroo/7c2549fc96673a425ff16b4a19c7e7a1 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
music.html
<html>
<head></head>
<body>
<script>
var AudioContext , audioContext , currentBuffer ;
// AUDIO CONTEXT
function call() {
window.AudioContext = window.AudioContext || window.webkitAudioContext;
if (!AudioContext) alert('This site cannot be run in your Browser. Try a recent Chrome or Firefox. ');
audioContext = new AudioContext();
currentBuffer = null;
loadMusic('mokhtabad.mp3');
}
// CANVAS
var canvasWidth = 1900, canvasHeight = 240;
var newCanvas = createCanvas(canvasWidth, canvasHeight);
var context = null;
window.onload = appendCanvas;
function appendCanvas() {
document.body.appendChild(newCanvas);
context = newCanvas.getContext('2d');
}
// MUSIC LOADER + DECODE
function loadMusic(url) {
var req = new XMLHttpRequest();
req.open("GET", url, true);
req.responseType = "arraybuffer";
req.onreadystatechange = function (e) {
if (req.readyState == 4) {
if (req.status == 200)
audioContext.decodeAudioData(req.response,
function (buffer) {
currentBuffer = buffer;
displayBuffer(buffer);
}, onDecodeError);
else
alert('error during the load.Wrong url or cross origin issue');
}
};
req.send();
}
function onDecodeError() {
alert('error while decoding your file.');
}
// MUSIC DISPLAY
// function displayBuffer(buff /* is an AudioBuffer */) {
// console.log(buff);
// var leftChannel = buff.getChannelData(0); // Float32Array describing left channel
// var lineOpacity = canvasWidth / leftChannel.length;
// context.save();
// context.fillStyle = '#222';
// context.fillRect(0, 0, canvasWidth, canvasHeight);
// context.strokeStyle = '#121';
// context.globalCompositeOperation = 'lighter';
// context.translate(0, canvasHeight / 2);
// context.globalAlpha = 0.06; // lineOpacity ;
// for (var i = 0; i < leftChannel.length; i++) {
// // on which line do we get ?
// var x = Math.floor(canvasWidth * i / leftChannel.length);
// var y = leftChannel[i] * canvasHeight / 2;
// context.beginPath();
// context.moveTo(x, 0);
// context.lineTo(x + 1, y);
// context.stroke();
// }
// context.restore();
// console.log('done');
// }
function displayBuffer(buff /* is an AudioBuffer */) {
var leftChannel = buff.getChannelData(0); // Float32Array describing left channel
// we 'resample' with cumul, count, variance
// Offset 0 : PositiveCumul 1: PositiveCount 2: PositiveVariance
// 3 : NegativeCumul 4: NegativeCount 5: NegativeVariance
// that makes 6 data per bucket
var resampled = new Float64Array(canvasWidth * 6 );
var i=0, j=0, buckIndex = 0;
var min=1e3, max=-1e3;
var thisValue=0, res=0;
var sampleCount = leftChannel.length;
// first pass for mean
for (i=0; i<sampleCount; i++) {
// in which bucket do we fall ?
buckIndex = 0 | ( canvasWidth * i / sampleCount );
buckIndex *= 6;
// positive or negative ?
thisValue = leftChannel[i];
if (thisValue>0) {
resampled[buckIndex ] += thisValue;
resampled[buckIndex + 1] +=1;
} else if (thisValue<0) {
resampled[buckIndex + 3] += thisValue;
resampled[buckIndex + 4] +=1;
}
if (thisValue<min) min=thisValue;
if (thisValue>max) max = thisValue;
}
// compute mean now
for (i=0, j=0; i<canvasWidth; i++, j+=6) {
if (resampled[j+1] != 0) {
resampled[j] /= resampled[j+1]; ;
}
if (resampled[j+4]!= 0) {
resampled[j+3] /= resampled[j+4];
}
}
// second pass for mean variation ( variance is too low)
for (i=0; i<leftChannel.length; i++) {
// in which bucket do we fall ?
buckIndex = 0 | (canvasWidth * i / leftChannel.length );
buckIndex *= 6;
// positive or negative ?
thisValue = leftChannel[i];
if (thisValue>0) {
resampled[buckIndex + 2] += Math.abs( resampled[buckIndex] - thisValue );
} else if (thisValue<0) {
resampled[buckIndex + 5] += Math.abs( resampled[buckIndex + 3] - thisValue );
}
}
// compute mean variation/variance now
for (i=0, j=0; i<canvasWidth; i++, j+=6) {
if (resampled[j+1]) resampled[j+2] /= resampled[j+1];
if (resampled[j+4]) resampled[j+5] /= resampled[j+4];
}
context.save();
context.fillStyle = '#000' ;
context.fillRect(0,0,canvasWidth,canvasHeight );
context.translate(0.5,canvasHeight / 2);
context.scale(1, 200);
for (var i=0; i< canvasWidth; i++) {
j=i*6;
// draw from positiveAvg - variance to negativeAvg - variance
context.strokeStyle = '#F00';
context.beginPath();
context.moveTo( i , (resampled[j] - resampled[j+2] ));
context.lineTo( i , (resampled[j +3] + resampled[j+5] ) );
context.stroke();
// draw from positiveAvg - variance to positiveAvg + variance
context.strokeStyle = '#FFF';
context.beginPath();
context.moveTo( i , (resampled[j] - resampled[j+2] ));
context.lineTo( i , (resampled[j] + resampled[j+2] ) );
context.stroke();
// draw from negativeAvg + variance to negativeAvg - variance
// context.strokeStyle = '#FFF';
context.beginPath();
context.moveTo( i , (resampled[j+3] + resampled[j+5] ));
context.lineTo( i , (resampled[j+3] - resampled[j+5] ) );
context.stroke();
}
context.restore();
console.log('done 231 iyi');
}
function createCanvas(w, h) {
var newCanvas = document.createElement('canvas');
newCanvas.width = w;
newCanvas.height = h;
return newCanvas;
}
</script>
</body>
</html>
Raw
srt.html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<script>
$.get('srt.json', function(data) {
var time = 0 ;
setInterval(function(){
time += 500;
}, 500);
$.each(data, (k, v) => {
if(v.start_time == time){
}
});
});
</script>
</body>
</html>
Raw
srt.json
[
{
"start_time": "00:00:00,586",
"end_time": "00:00:03,088",
"text": "،کسی که دوسال پیش توسط خودتون دستگیر شد\nعدم حضور این شخص در سطح جهان"
},
{
"start_time": "00:00:03,112",
"end_time": "00:00:06,002",
"text": ".باعث بوجود اومدن عواقب ناخواسته‌ای شده"
},
{
"start_time": "00:00:06,464",
"end_time": "00:00:10,964",
"text": "سندیکای اون از اعضای مخفی و فاسدی تشکیل شده\n.که صدد ایجاد ویرانی‌های بزرگ در سراسر دنیا هستند"
},
{
"start_time": "00:00:11,059",
"end_time": "00:00:13,556",
"text": "CIA واحد عملیات‌های ویژۀ\nبا تلاش‌های بی‌وقفه‌شون"
},
{
"start_time": "00:00:13,580",
"end_time": "00:00:15,691",
"text": "موفق شدند تا یکی از شبکه‌های\n.خصمانه و مهم \"لین\" رو نابود کنند"
},
{
"start_time": "00:00:16,249",
"end_time": "00:00:18,369",
"text": ".ولی بسیاری از اعضا، ناشناس و آزاد هستند"
},
{
"start_time": "00:00:18,886",
"end_time": "00:00:23,498",
"text": "اعضای باقیماندۀ این گروه مخفیِ افراطی\n.اسم خودشون رو \"حواریون\" گذاشتند\n[یک گروهک ترویستی که خودشون رو فرستاده خدا برای اصلاح دنیا میدونن]"
},
{
"start_time": "00:00:24,869",
"end_time": "00:00:27,071",
"text": "اونا طبق سیاست‌شون، آمادگی‌شون\n.واسه استخدامِ فعالیت‌های تروریستی اعلام کردن"
},
{
"start_time": "00:00:27,095",
"end_time": "00:00:29,343",
"text": "که این اونا رو به تهدید بزرگ‌تری\n.تبدیل می‌کنه"
},
{
"start_time": "00:00:29,828",
"end_time": "00:00:32,937",
"text": "اونا مسئول شیوع آبلۀ اخیر توی\n.هند هستن که توی \"کشمیر\" مهار شد"
},
{
"start_time": "00:00:32,961",
"end_time": "00:00:36,044",
"text": ".و تا مرزهای چین و پاکستان پیش‌روی کرد"
},
{
"start_time": "00:00:36,068",
"end_time": "00:00:38,624",
"text": ".که یک‌سوم جمعیت جهان رو مورد تهدید قرار داد"
},
{
"start_time": "00:00:38,888",
"end_time": "00:00:42,486",
"text": "بیماری مهار شده ولی کلاغ‌ها خبر آوردن که"
},
{
"start_time": "00:00:42,510",
"end_time": "00:00:46,177",
"text": "یه مشتری جدید \"حواریون\" رو استخدام کرده تا\n.عملیات بلندپروازانه‌تری انجام بدن"
},
{
"start_time": "00:00:46,695",
"end_time": "00:00:49,485",
"text": ".این مرد رابط اون‌ها بوده\nیه افراطی ناشناس"
},
{
"start_time": "00:00:49,509",
"end_time": "00:00:51,987",
"text": ".که فقط با اسم رمزی \"جان لارک\" شناخته میشه"
},
{
"start_time": "00:00:52,344",
"end_time": "00:00:54,534",
"text": "که نویسندۀ این بیانیۀ آخرالزمانیه\n:بیانیه‌ای بنام"
},
{
"start_time": "00:00:54,558",
"end_time": "00:00:56,498",
"text": ".تخریب نظم جهانی فعلی"
},
{
"start_time": "00:00:56,522",
"end_time": "00:00:58,661",
"text": "<i>،لازمه برقراری صلح\nیک مصیبت بزرگه</i>"
},
{
"start_time": "00:00:58,685",
"end_time": "00:01:01,349",
"text": "ما بر این باوریم که \"لارک\" مسئول ناپدید شدن"
},
{
"start_time": "00:01:01,373",
"end_time": "00:01:04,104",
"text": "متخصص نروژی سلاح‌های هسته‌ای‌‍\n.نیلز دبروک\"‌‍ه\""
},
{
"start_time": "00:01:04,128",
"end_time": "00:01:07,254",
"text": "بعد از اینکه دکتر \"دبروک\" دیدگاه‌های\n،به‌شدت ضدمذهبی‌اش رو بیان کرد"
},
{
"start_time": "00:01:07,254",
"end_time": "00:01:08,988",
"text": ".پروانۀ امنیتی‌ش باطل شد"
},
{
"start_time": "00:01:09,364",
"end_time": "00:01:11,590",
"text": "در همین حین، \"حواریون\" با\nعوامل دنیای جنایتکاران"
},
{
"start_time": "00:01:11,614",
"end_time": "00:01:14,013",
"text": "در اروپایی شرقی ارتباط برقرار کردن"
},
{
"start_time": "00:01:14,037",
"end_time": "00:01:16,115",
"text": "تشکیلاتی که سه هستۀ\nپلوتونیوم در اختیار دارن"
},
{
"start_time": "00:01:16,139",
"end_time": "00:01:18,584",
"text": "که این سه هسته رو از یه موشک\n.توی پایگاهی در شرق روسیه دزدیدن"
},
{
"start_time": "00:01:19,560",
"end_time": "00:01:22,311",
"text": "\"این نشون میده که \"جان لارک\nو \"حواریون\" دارن باهمدیگه"
},
{
"start_time": "00:01:22,335",
"end_time": "00:01:25,391",
"text": "برای بدست آوردن سلاح‌های\n.هسته‌ای کار می‌کنن"
},
{
"start_time": "00:01:26,169",
"end_time": "00:01:29,907",
"text": "آکادمی ملّی علوم و تکنولوژی تخمین زده که مردی با\nمیزان اطلاعات \"دبروک\" و مواد لازم"
},
{
"start_time": "00:01:29,931",
"end_time": "00:01:33,510",
"text": "می‌تونه طی حدود72 ساعت، سه‌تا\n.سلاح هسته‌ای کامل بسازه"
},
{
"start_time": "00:01:34,504",
"end_time": "00:01:38,838",
"text": "این سلاح‌ها قابل حمل هستن و می‌تونن\n.یک شبه هرجایی روی زمین جایگیر بشن"
},
{
"start_time": "00:01:39,536",
"end_time": "00:01:42,339",
"text": "وجود همچین سلاح‌هایی توی دست‌های\n،\"جان لارک\" و \"حواریون \""
},
{
"start_time": "00:01:42,363",
"end_time": "00:01:45,641",
"text": "به این معنی‌‍ه که زندگی میلیون‌ها نفر\n.در تهدید مرگ قرار داره"
},
{
"start_time": "00:01:46,296",
"end_time": "00:01:49,450",
"text": "مأموریت شما، که برای پذیرفتن‌‌‍ش\nحق انتخاب دارین، اینه‌که"
},
{
"start_time": "00:01:49,474",
"end_time": "00:01:53,363",
"text": "\"به هر صورتی که شده اجازه ندین \"حواریون\n.به پلوتونیوم دست پیدا کنن"
},
{
"start_time": "00:01:54,004",
"end_time": "00:01:57,381",
"text": "اگه خودتون یا یکی از افراد تیم\n،آی‌ام‌اف، گیر بیوفتن یا کُشته بشن"
},
{
"start_time": "00:01:57,405",
"end_time": "00:02:00,516",
"text": "ریاست هرگونه اطلاع از اقدامات شما را\n.انکار خواهد کرد"
},
{
"start_time": "00:02:00,735",
"end_time": "00:02:04,248",
"text": "موفق باشی، \"ایتان\"، این پیام تا 5 ثانیه\n.دیگر به‌طور خودکار نابود خواهد شد"
},
{
"start_time": "00:02:04,272",
"end_time": "00:02:10,272",
"text": "<font color=\"#cb351b\">.::ارائه‏ای اختصاصی از وبسایتِ::.\n|-| Film2Movie.US |-|</font>"
},
{
"start_time": "00:02:10,296",
"end_time": "00:02:16,296",
"text": "<font color=\"#b8b8dc\">.:.:. با دنبال کردن اینستاگرامِ ما بروزترین باشید .:.:.</font>\n<font color=\"#0080ff\">*|*|*|* @MyFilm2Movie *|*|*|*</font>"
},
{
"start_time": "00:02:16,787",
"end_time": "00:02:19,436",
"text": "<i>برلین</i>"
},
{
"start_time": "00:02:20,079",
"end_time": "00:02:21,079",
"text": ".دیر کرده"
},
{
"start_time": "00:02:21,548",
"end_time": "00:02:22,548",
"text": ".اون هیچوقت دیر نمی‌کنه"
},
{
"start_time": "00:02:23,259",
"end_time": "00:02:24,259",
"text": ".بالاخره میاد"
},
{
"start_time": "00:02:24,594",
"end_time": "00:02:25,594",
"text": ".از این وضعیت خوشم نمیاد"
},
{
"start_time": "00:02:26,325",
"end_time": "00:02:28,526",
"text": ".این یارو یه جای کارش می‌لنگه\n...اون"
},
{
"start_time": "00:02:28,550",
"end_time": "00:02:30,939",
"text": "واقعاً منو عصبی می‌کنه -\nچیزی نیست، آروم باش -"
},
{
"start_time": "00:02:31,648",
"end_time": "00:02:32,648",
"text": ".من آرومم"
},
{
"start_time": "00:02:33,259",
"end_time": "00:02:36,469",
"text": "،به‌نظر که آروم نمیای\nلوتر\"، به‌نظرت اون آرومه؟\""
},
{
"start_time": "00:02:36,493",
"end_time": "00:02:40,685",
"text": ".به‌نظر که گرخیده -\nبی‌خیال، من نگرخیدم، فقط حس بدی دارم. همین -"
},
{
"start_time": "00:02:40,709",
"end_time": "00:02:43,557",
"text": "مگه خودت نگفتی آرومی؟ -\nکاملاً امکانش هست که -"
},
{
"start_time": "00:02:43,581",
"end_time": "00:02:46,071",
"text": "همزمان هم به‌شدت آروم باشی\n.و هم معذب باشی"
},
{
"start_time": "00:02:46,095",
"end_time": "00:02:48,699",
"text": "نه، اینطور نیست -\nهمیشه کارت همینه -\nنه نیست -"
},
{
"start_time": "00:02:48,723",
"end_time": "00:02:50,126",
"text": "چرا، هستی -\nنه، نیست -"
},
{
"start_time": "00:02:50,126",
"end_time": "00:02:52,150",
"text": "حالا من باید باور کنم که الان خودت\nکاملاً آرومی؟"
},
{
"start_time": "00:02:52,509",
"end_time": "00:02:54,860",
"text": "اون هم الان اینجا؟ توی یه کوچۀ تاریک؟"
},
{
"start_time": "00:02:54,884",
"end_time": "00:02:57,505",
"text": "منتظر وایستادی تا توی بازار سیاه\n.یه پلوتونیوم رو از یه روانی بخری"
},
{
"start_time": "00:02:57,529",
"end_time": "00:02:59,791",
"text": ".بنجی\"، من نمی‌خوام اتفاقی واست بیوفته\""
},
{
"start_time": "00:03:00,193",
"end_time": "00:03:01,741",
"text": "<i>دیدی، \"بنجی\"، تو\n.در امنیت کامل هستی</i>"
},
{
"start_time": "00:03:01,765",
"end_time": "00:03:03,905",
"text": ".گفتنش واسه تو آسونه\n.تو راحت توی وَن نشستی"
},
{
"start_time": "00:03:03,929",
"end_time": "00:03:05,929",
"text": ".خب، خودت خواستی اینجا باشی، آقای سرسخت"
},
{
"start_time": "00:03:05,953",
"end_time": "00:03:08,104",
"text": ".\"یه امشب رو دلم میخواد توی وَن باشم، \"لوتز"
},
{
"start_time": "00:03:08,128",
"end_time": "00:03:09,128",
"text": ".اومد"
},
{
"start_time": "00:03:09,907",
"end_time": "00:03:10,907",
"text": ".اوه، خدای من"
},
{
"start_time": "00:03:13,327",
"end_time": "00:03:21,723",
"text": "« <font color=\"#00ffff\">وحید فرحناکی</font> & <font color=\"#ff0000\">آریا</font> :مترجمیــــن :»\n.:: <font color=\"#ff0000\">Ariya</font> & <font color=\"#00ffff\">Night_walker77</font> ::."
},
{
"start_time": "00:03:26,589",
"end_time": "00:03:29,232",
"text": "\"پول رو آماده کن، \"لوتر -\nدریافت شد -"
},
{
"start_time": "00:03:34,228",
"end_time": "00:03:36,504",
"text": "ایتان\"، صدامو داری؟\"\n!صدامو داری؟"
},
{
"start_time": "00:03:49,848",
"end_time": "00:03:51,904",
"text": "آخرش معامله می‌کنیم یا نه؟"
},
{
"start_time": "00:03:58,027",
"end_time": "00:04:01,999",
"text": "من توی این تجارت جون سالم به‌در بردم\n.چون به صدای توی کلّه‌ام گوش میکردم"
},
{
"start_time": "00:04:04,047",
"end_time": "00:04:07,698",
"text": ".این صدا هیچوقت اشتباه نمی‌کنه\n...هردفعه که تو رو می‌بینم"
},
{
"start_time": "00:04:08,074",
"end_time": "00:04:09,811",
"text": ".همه‌ش یه چیزو بهم می‌گه"
},
{
"start_time": "00:04:10,534",
"end_time": "00:04:11,534",
"text": "چی میگه اونوقت؟"
},
{
"start_time": "00:04:12,602",
"end_time": "00:04:13,602",
"text": ".هیچی"
},
{
"start_time": "00:04:18,948",
"end_time": "00:04:22,060",
"text": ".من اومدم اینجا معامله کنم\n.به صدای توی کلّه‌ت بگو انتخابش رو بکنه"
},
{
"start_time": "00:04:54,288",
"end_time": "00:04:55,288",
"text": "اون چیه؟"
},
{
"start_time": "00:04:55,449",
"end_time": "00:04:57,679",
"text": ".یه میلۀ برلیمی‌‍ه\nباعث میشه"
}
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment