Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript
Войти
Регистрация
Восстановить пароль
 
 
Рейтинг 4.89/273: Рейтинг темы: голосов - 273, средняя оценка - 4.89
Опан
Юзер с абсолютным слухом
577 / 387 / 158
Регистрация: 17.12.2010
Сообщений: 1,162
31.10.2015, 02:18 41

Не по теме:

Я - баянист :)


Цитата Сообщение от stakon Посмотреть сообщение
Простой анализатор спектра. Не получается запустить, появляется синий прямоугольник и всё, может ошибка в коде?
Я вот и сам на днях хотел его запустить, но... результат был тот же... Перед публикацией я проверял код, и он работал.
Я считаю, что не обязательно разработчикам браузеров так часто выпускать новые версии, пусть они будут реже, но чтобы предусматривали сохранение работоспособности всех нюансов. Другого объяснения я пока не вижу.
Попробуйте ещё уточнить, в каком браузере Вы пытались запустить. Формат аудиофайла МП3 поддерживает Google Chrome, (и кажется мозилла) а в опере требуется формат файла OGG.

Добавлено через 2 часа 19 минут
Оказывается, в последний раз я по ошибке пытался запустить анализатор на локалке. На сервере он работает. Вот ссылка.Так что, я напрасно обвинил разработчиков браузеров. Может и Вы запускали на локалке? Или же на сервере, но ссылку на аудиофайл брали с другого сервера?
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
31.10.2015, 02:18
Ответы с готовыми решениями:

Обмен между фреймами
ситуация такова есть страница, на ней два фрейма в левом фрейме страница левого сайта с формой...

Как организовать обмен сообщениями
В общем, суть такова. Как лучше всего проверять новые записи в БД? Чат типо ICQ или как в ВК...

обмен файлами без фактической передачи
на хосте лежит искомый файл и рассчёт числа ПИ до миллиардного знака. программа сравнивает...

Обмен данными между двумя сервисами
Здравствуйте. Стоит перед до мной одна задача. В системе amocrm создать виджет. Сам он пишет на JS....

Обмен готовыми решениями
Привет, мир! Предлагаю здесь обмениваться готовыми решениями, исключительно html + css. Итак,...

64
arcmag
261 / 257 / 180
Регистрация: 27.06.2014
Сообщений: 668
12.11.2015, 11:52 42
Если кому интересно вот мой список из 4-х методов
css - позволяет передать группу стилей в элемент через объект
spoiler - сворачивает/разворачивает указанный элемент
moving - позволяет перемещать элемент по странице
resize - позволяет изменять размеры высоты и ширины элемента
PHPHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
<!DOCTYPE html>
<html>
<head>
    <title>lib</title>
    <script>
        var lib = (function () {
            "use-strict";
            js = {};
            js.css = function (elem, css) {
                for (var i in css) elem.style[i] = css[i];
            }
            js.spoiler = function (activator, block, open) {
                /*
                 * activator - элемент при клике на который будет происходить сворачивание/разворачивание блока (string = selector || html element)
                 * block     - блок который будет сворачиваться и разворачиваться (string = selector || html element)
                 * open      - (не обязательно) начальное состояние блока открыт/закрыт (default - false || true)
                 * */
                var a = typeof activator === "string" ? document.querySelector (activator) : activator,
                        b = typeof block === "string"     ? document.querySelector (block)     : block,
                        h = b.offsetHeight,
                        p = getComputedStyle (b)["padding"],
                        m = getComputedStyle (b)["margin"],
                        r = getComputedStyle (b)["border"],
                        f = function () {
                            if (b.offsetHeight !== 0) {
                                if (h !== b.offsetHeight) h = b.offsetHeight;
                            }
                            js.css (b, b.offsetHeight == 0 ?
                                {height:h + "px", padding: p, margin: m, border: r, overflow: "visible"} :
                                {height:0, padding: 0, margin: 0, border : 0, overflow: "hidden"}
                            );
                        };
                if (open !== true) js.css (b, {height:0, padding: 0, margin: 0, border : 0});
                a.addEventListener ("click", f);
            }
            js.moving = function (active, relocatable, config) {
                /*
                 active      - элемент который будет захватываться мышкой (string = selector || html element)
                 relocatable - перемещаемый элемент (string = selector || html element)
                 config       - object
                    output      - метка определяющая перемещение элементов HTML при выходе за пределы захваченного элемента (default = false || true)
                 */
                var objActive = typeof active === "string" ? document.querySelector(active) : active,
                    objMoving = typeof relocatable === "string" ? document.querySelector(relocatable) : relocatable,
                    objStatus = false,
                    startPos  = {x:"", y:""},
                    move = function (e) {
                            if(objStatus){
                                objMoving.style.top  = e.clientY - startPos.y + "px";
                                objMoving.style.left = e.clientX - startPos.x + "px";
                            }
                    },
                    down = function (e) {
                            objStatus = true;
                            startPos.x = e.clientX - objMoving.offsetLeft;
                            startPos.y = e.clientY - objMoving.offsetTop;
                    },
                    up = function () {
                            objStatus = false;
                    };
                config    = typeof config !== "object" ? {} : config;
                config.output = typeof config.output === "undefined" ? true : config.output;
                objActive.addEventListener("mousedown", down);
                if(config.output) document.addEventListener("mousemove", move);
                else objActive.addEventListener("mousemove", move);
                document.addEventListener("mouseup", up);
            }
            js.resize = function (eResize, cssSeizure) {
                /*
                 * eResize - элемент который будет менять размеры (string = selector || html element)
                 * cssSeizure - настройки стилей для элемента регулятора размеров (object)
                 * */
                var seizure   = document.createElement ("div"),
                    cssR      = {
                        position: "absolute",
                        right: "-15px",
                        bottom: "-15px",
                        width: "15px",
                        height: "15px",
                        background: "rgba(0,0,0,0.7)",
                        zIndex: 9999999
                    },
                    resize    = typeof eResize === "string" ? document.querySelector (eResize) : eResize,
                    objStatus = false,
                    startPos  = {x:"", y:""},
                    wrapp = resize.parentNode.classList.contains ("relocBlock") ? resize.parentNode : resize,
                    move = function (e) {
                            if(objStatus){
                                var sTop = parseInt (getComputedStyle (seizure)["top"]),
                                    sLeft = parseInt (getComputedStyle (seizure)["left"]),
                                    nTop, nLeft;
                                seizure.style.top  = e.clientY - startPos.y + "px";
                                seizure.style.left = e.clientX - startPos.x + "px";
                                nTop = parseInt (getComputedStyle (seizure)["top"]);
                                nLeft = parseInt (getComputedStyle (seizure)["left"]);
                                resize.style.width = (parseInt (getComputedStyle (resize)["width"]) - (sLeft - nLeft)) + "px";
                                resize.style.height = (parseInt (getComputedStyle (resize)["height"]) - (sTop - nTop)) + "px";
                                if (0 >= seizure.offsetLeft) {
                                    resize.style.width = 0 + "px";
                                    seizure.style.left = 0 + "px";
                                }
                                if (0 >= seizure.offsetTop) {
                                    seizure.style.top = 0 + "px";
                                    resize.style.height = 0 + "px";
                                };
                            }
                        },
                    down = function (e) {
                            objStatus = true;
                            startPos.x = e.clientX - seizure.offsetLeft;
                            startPos.y = e.clientY - seizure.offsetTop;
                        },
                    up = function () {
                            objStatus = false;
                    },
                    pos = getComputedStyle(resize)["position"];
                if (typeof parseInt (getComputedStyle (wrapp)["bottom"]) === "number") {
                    wrapp.style.top = wrapp.offsetTop + "px";
                    wrapp.style.bottom = "auto";
                }
                if (typeof parseInt (getComputedStyle (wrapp)["right"]) === "number") {
                    wrapp.style.left = wrapp.offsetLeft + "px";
                    wrapp.style.right = "auto";
                }
                if (typeof cssSeizure === "object") {
                    var ban = ["position", "left", "right", "top", "bottom", "width", "height"]
                    for (var i in cssSeizure) {
                        if (ban.indexOf (i) !== -1) continue;
                        cssR[i] = cssSeizure[i];
                    }
                }
                js.css (seizure, cssR);
                if (pos !== "fixed" && pos !== "absolute" &&pos !== "relative") resize.style.position = "relative";
                seizure.classList.add ("resize");
                resize.appendChild (seizure);
                seizure.addEventListener("mousedown", down);
                document.addEventListener("mousemove", move);
                document.addEventListener("mouseup", up);
            }
            return js;
        } ());
        window.addEventListener ("load", function () {
            lib.resize (".elem .wrapp");
            lib.moving (".elem .reloc", ".elem");
            lib.spoiler (".elem .spoiler", ".elem .wrapp", true);
        });
    </script>
    <style>
        .elem{position:fixed;left:100px;top:100px;}
        .elem .wrapp{
            width: 300px;
            height: 100px;
            background: rgba(0,0,0,0.3);
            border: solid 1px rgba(255,0,0,1);
            box-shadow: inset 0px 0px 25px rgba(255,0,0,1), 0px 0px 25px rgba(255,0,0,1);
        }
        .elem .reloc{
            position: absolute;
            right: 0px;
            width: 50px;
            height: 25px;
            background: rgba(255,0,0,0.3);
            border: solid 1px rgba(255,0,0,1);
            box-shadow: inset 0px 0px 15px rgba(255,0,0,1), 0px 0px 15px rgba(255,0,0,1);
            top: -30px;
        }
        .elem .spoiler{
            position: absolute;
            right: 0px;
            width: 25px;
            height: 25px;
            background: rgba(0,150,255,0.3);
            border: solid 1px rgba(0,150,255,1);
            box-shadow: inset 0px 0px 15px rgba(0,150,255,1), 0px 0px 15px rgba(0,150,255,1);
            top: -60px;
        }
    </style>
</head>
<body>
    <div class="elem">
        <div class="reloc"></div>
        <div class="spoiler"></div>
        <div class="wrapp"></div>
    </div>
</body>
</html>
0
Fedor Vlasenko
Программист Php, Js
Эксперт PHP
817 / 550 / 215
Регистрация: 01.02.2015
Сообщений: 1,690
12.11.2015, 12:16 43
Pабота с localstorage, подписка на события localstorage, хранение функций, массивов и объектов в localstorage, интерфейс подписки позволяет передать параметры подписчикам (открытым вкладкам браузера), передать и выполнить в них переданные функции. Реализация работы между вкладками внутри браузера localstorage
Скачивайте и тестируйте примеры. Ваши желания и пожелания будут учтены.
HTML5
1
2
<script src="storage.js"></script>
<script>alert(_storage('name'));</script>
1
Padimanskas
Superposition
935 / 595 / 256
Регистрация: 27.10.2013
Сообщений: 2,067
23.03.2016, 14:07 44
JSON-база c описанием 16-битных игр с приставки Sega. Всего 1012 игр - почти все что тогда существовали и даже пиратские. Описание на русском. Есть скриншоты.
Мб кому-то пригодится..
Архив tar.gzip
JSON свойства:
American - западное название игры
Japan - название игры в Японии
Year - год производства
Genre - жанр игры
Developer - разработчик игры
Img - путь к файлу скриншота
OName - другое название игры
Description - описание игры
1
Thisman
Модератор
768 / 350 / 141
Регистрация: 17.07.2013
Сообщений: 992
27.03.2016, 21:10 45
Мало ли может кому пригодиться, небольшая библиотека, для упрощенной работы с query string

Тут git репозиторий с тестами и прочими штуками

Полный код:
Кликните здесь для просмотра всего текста

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
var URLQueryBuilder = (function () {
    /**
    *   Merge two objects
    */
    function mergeObj(obj1, obj2) {
        var result = {};
        for(var i in obj1) result[i] = obj1[i];
        for(var j in obj2) result[j] = obj2[j];
 
        return result;
    }
    /**
    *   Parse queries
    *   @param {Object|string} queries
    *   @return {Object} parsed queries
    */
    function parseQueries (queries) {
        var parsedQueries = {};
 
        if(typeof queries === "string") {
            var queriesArray = queries.split("&");
            for(var i = 0; i < queriesArray.length; i++) {
                var query = queriesArray[i].split("=");
                // check to valud data
                if(query.length == 2)
                    parsedQueries[query[0]] = query[1];
            }       
        } else if(typeof (queries === "object") && queries) { // typeof null/undefined === "object"
            parsedQueries = queries; 
        }
 
        return parsedQueries;
    }
    /**
    *   Parse queries from inital url string
    *   @param {string} url
    */
    function parseQueriesFromUrl(url) {
        var queries = {};
 
        if(typeof url === 'string') {
            queries = url.split("?")[1];
            queries = parseQueries(queries);
        }
 
        return queries;
    }
    /**
    *   get a clear url without query
    *   @param {string} url
    *   @return {string} url without query string
    */
    function getClearUrl(url) {
        var clearedUrl = '';
 
        if(typeof url === 'string')
            clearedUrl = url.split("?")[0];
 
        return clearedUrl;
    }
 
 
    /**
    *   @constructor
    *   @param {string} url
    *   @param {string|object|undefined} queries
    */
    function URLQueryBuilder (url, queries) {
        this.url = getClearUrl(url);
        this.queries = parseQueriesFromUrl(url);
 
        var queriesFromParam = parseQueries(queries);
        this.queries = mergeObj(this.queries, queriesFromParam);
 
        
        /**
         *  Get a current url with queries
         */
        URLQueryBuilder.prototype.getUrl = function() {
            var url = this.url;
            var queries = '?';
            for(var name in this.queries)
                queries += (name + "=" + this.queries[name] + "&");
         
            return url + queries;
        };
        
 
        /**
         *  Get clear url without queries
         */
        URLQueryBuilder.prototype.getClearUrl = function() {
 
            return this.url;
        };
 
        /**
         *  Delete query by name
         *  @param {string} name, query that will be deleted
         */
        URLQueryBuilder.prototype.delete = function(name) {
            delete this.queries[name];
            
            return this;
        };
 
        /**
         *  Change query by name
         *  @param {string} name, query what will be changed
         *  @param {string|number} value, new value for query
         */
        URLQueryBuilder.prototype.change = function(name, value) {
            this.queries[name] = value.toString();
 
            return this;
        };
 
        /**
         *  Add new query
         *  @param {string} name, name of new query
         *  @param {string|number} value, value for new query
         */
        URLQueryBuilder.prototype.add = function(name, value) {
            if(typeof name === "string") {
                this.queries[name] = value.toString();
            } else if(typeof name === "object" && name) {
                var queries = name;
                for(var i in queries) 
                    this.add(i, queries[i]);
            } else {
                throw new Error("Param 'name' must be a string or an object");
            }
 
            return this;
        };
 
 
        /**
         *  Clear query string
         *  @param {string|object} queries
         */
        URLQueryBuilder.prototype.reset = function(queries) {
            this.queries = parseQueries(queries);
 
            return this;
        };
 
 
        /**
         *  Check if queries has specific query
         *  @return {boolean} true if has, false if not
         */
        URLQueryBuilder.prototype.has = function(name) {
 
            return (name in this.queries);
        };
    }
})();
0
cyb0rg_01
Фрилансер
617 / 340 / 96
Регистрация: 05.05.2014
Сообщений: 2,441
12.04.2016, 18:00 46
Получение точек пересечения прямой и окружности.

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
function Point(X, Y) {
    this.X = X;
    this.Y = Y;
}
 
function Line(firstPoint, secondPoint) {
    this.firstPoint = jQuery.extend({}, firstPoint);
    this.secondPoint = jQuery.extend({}, secondPoint);
    this.k = (secondPoint.Y - firstPoint.Y) / (secondPoint.X - firstPoint.X);
    this.b = firstPoint.Y - this.k * firstPoint.X;
}
 
function Circle(centerPoint, radius) {
    this.centerPoint = jQuery.extend({}, centerPoint);
    this.radius = radius;
    this.getIntersectionPointsWithLine = function (line) {
        if (Math.abs(line.k) == Infinity) {
            var a = 1;
            var b = -2 * centerPoint.Y;
            var c = Math.pow(centerPoint.Y, 2) + Math.pow(Math.abs(line.firstPoint.X - centerPoint.X), 2) - Math.pow(radius, 2);
 
            var d = b * b - 4 * a * c;
 
            if (d > 0) {
                var y1 = (-b + Math.sqrt(d)) / (2 * a);
                var y2 = (-b - Math.sqrt(d)) / (2 * a);
                return [new Point(line.firstPoint.X, y1), new Point(line.firstPoint.X, y2)];
            }
            else if (d == 0) {
                var y = -b / (2 * a);
                return [new Point(line.firstPoint.X, y)];
            }
        }
        else if (line.k == 0)
        {
            var a = 1;
            var b = -2 * centerPoint.X;
            var c = Math.pow(centerPoint.X, 2) + Math.pow(Math.abs(line.firstPoint.Y - centerPoint.Y), 2) - Math.pow(radius, 2);
 
            var d = b * b - 4 * a * c;
 
            if (d > 0) {
                var x1 = (-b + Math.sqrt(d)) / (2 * a);
                var x2 = (-b - Math.sqrt(d)) / (2 * a);
                return [new Point(x1, line.firstPoint.Y), new Point(x2, line.firstPoint.Y)];
            }
            else if (d == 0) {
                var x = -b / (2 * a);
                return [new Point(x, line.firstPoint.Y)];
            }
        }
        else
        {
            var a = (1 + Math.pow(Math.abs(line.k), 2));
            var b = -(2 * Math.pow(centerPoint.X,2) + 2 * line.k * (line.b - centerPoint.Y));
            var c = Math.pow(centerPoint.X, 2) + Math.pow(Math.abs(line.b - centerPoint.Y), 2) - Math.pow(radius, 2);
 
            var d = b * b - 4 * a * c;
 
            if (d > 0) {
                var x1 = (-b + Math.sqrt(d)) / (2 * a);
                var x2 = (-b - Math.sqrt(d)) / (2 * a);
                var y1 = line.k * x1 + line.b;
                var y2 = line.k * x2 + line.b;
 
                return [new Point(x1, y1), new Point(x2, y2)];
            }
            else if (d == 0) {
                var x = -b / (2 * a);
                var y = line.k * x + line.b;
 
                return [new Point(x, y)];
            }
        }
        return [];
    }
}


В том коде была ошибка из-за разложении параметра прямой.
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
function Point(X, Y) {
    this.X = X;
    this.Y = Y;
}
 
function Line(firstPoint, secondPoint) {
    this.firstPoint = jQuery.extend({}, firstPoint);
    this.secondPoint = jQuery.extend({}, secondPoint);
    this.k = (secondPoint.Y - firstPoint.Y) / (secondPoint.X - firstPoint.X);
    this.b = firstPoint.Y - this.k * firstPoint.X;
}
 
function Circle(centerPoint, radius) {
    this.centerPoint = jQuery.extend({}, centerPoint);
    this.radius = radius;
    this.getIntersectionPointsWithLine = function (line) {
         if (Math.abs(line.k) == Infinity) {
            var a = 1;
            var b = -2 * centerPoint.Y;
            var c = Math.pow(centerPoint.Y, 2) + Math.pow(Math.abs(line.firstPoint.X - centerPoint.X), 2) - Math.pow(radius, 2);
 
            var d = b * b - 4 * a * c;
 
            if (d > 0) {
                var y1 = (-b + Math.sqrt(d)) / (2 * a);
                var y2 = (-b - Math.sqrt(d)) / (2 * a);
                return [new Point(line.firstPoint.X, y1), new Point(line.firstPoint.X, y2)];
            }
            else if (d == 0) {
                var y = -b / (2 * a);
                return [new Point(line.firstPoint.X, y)];
            }
        }
        else if (line.k == 0) {
            var a = 1;
            var b = -2 * centerPoint.X;
            var c = Math.pow(centerPoint.X, 2) + Math.pow(Math.abs(line.firstPoint.Y - centerPoint.Y), 2) - Math.pow(radius, 2);
 
            var d = b * b - 4 * a * c;
 
            if (d > 0) {
                var x1 = (-b + Math.sqrt(d)) / (2 * a);
                var x2 = (-b - Math.sqrt(d)) / (2 * a);
                return [new Point(x1, line.firstPoint.Y), new Point(x2, line.firstPoint.Y)];
            }
            else if (d == 0) {
                var x = -b / (2 * a);
                return [new Point(x, line.firstPoint.Y)];
            }
        }
        else {
            var a = (1 + Math.pow(Math.abs(line.k), 2));
            var b = -(2 * centerPoint.X - 2 * line.k * line.b + 2 * centerPoint.Y * line.k);
            var c = Math.pow(centerPoint.X, 2) + Math.pow(Math.abs(line.b), 2) - 2 * centerPoint.Y * line.b Math.pow(centerPoint.Y, 2) - Math.pow(radius, 2);
 
            var d = b * b - 4 * a * c;
 
            if (d > 0) {
                var x1 = (-b + Math.sqrt(d)) / (2 * a);
                var x2 = (-b - Math.sqrt(d)) / (2 * a);
                var y1 = line.k * x1 + line.b;
                var y2 = line.k * x2 + line.b;
 
                return [new Point(x1, y1), new Point(x2, y2)];
            }
            else if (d == 0) {
                var x = -b / (2 * a);
                var y = line.k * x + line.b;
 
                return [new Point(x, y)];
            }
        }
        return [];
    }
}
так же можно избавиться от зависимости в виде jQuery и использовать вместо extend такую запись
Javascript
1
new Point(point.X, point.Y);
0
sash
73 / 74 / 46
Регистрация: 09.10.2014
Сообщений: 510
09.06.2016, 15:25 47
Мой первый jQuery-плагин https://github.com/sash003/lightBox
0
sash
73 / 74 / 46
Регистрация: 09.10.2014
Сообщений: 510
18.06.2016, 20:40 48
Переделанный adipoli.js. Теперь можно задать свои стили картинкам (высоту, ширину). Работает во всех версиях jQuery (вроде ) Подключена лютая, бешенная jQuery 3.0.0
0
Вложения
Тип файла: rar AdipoliNorm.rar (655.9 Кб, 4 просмотров)
Padimanskas
Superposition
935 / 595 / 256
Регистрация: 27.10.2013
Сообщений: 2,067
30.06.2016, 20:47 49
Варианты UMD от James Burke на все случаи жизни. кому-то должно пригодиться
0
cyb0rg_01
Фрилансер
617 / 340 / 96
Регистрация: 05.05.2014
Сообщений: 2,441
02.09.2016, 13:06 50
Вращение https://jsfiddle.net/secm7gkj/1/
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
function Point(x, y)
{
    this.x = x;
        this.y = y;
}
 
function RotatedRect()
{
    this.canvas = document.getElementById("c");
    this.context = this.canvas.getContext("2d");
        this.leftTopPoint = new Point(this.canvas.width / 2, this.canvas.height / 2);
        this.mousePoint = new Point(this.canvas.width / 2, this.canvas.height / 2);
        this.width = 70;
        this.height = 10;
        
        this.init();
    this.reDraw();
}
 
RotatedRect.prototype.init = function()
{   
    var self = this;
        this.canvas.addEventListener("mousemove", function(event)
        {
            self.mousePoint = self.getPointByMouse(event);
            self.reDraw();
        });
}
 
RotatedRect.prototype.reDraw = function()
{   
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
 
        var angle = Math.atan2(this.mousePoint.y - this.leftTopPoint.y, this.mousePoint.x - this.leftTopPoint.x) * 180 / Math.PI;
        this.context.save();
        this.context.beginPath();
        this.context.translate(this.leftTopPoint.x, this.leftTopPoint.y);
        this.context.rotate(angle * Math.PI / 180);
        this.context.translate(-this.leftTopPoint.x, -this.leftTopPoint.y);
        this.context.rect(this.leftTopPoint.x, this.leftTopPoint.y, this.width, this.height);
        this.context.fill();
        this.context.restore();
}
 
 
RotatedRect.prototype.getPointByMouse = function(event)
{
    var rect = this.canvas.getBoundingClientRect();
        var x = (event.clientX - rect.left);
        var y = (event.clientY - rect.top);
    return new Point(x, y);
}
 
var rotatedRect = new RotatedRect();
Добавлено через 14 часов 7 минут
Синхронный вызов в отдельном потоке.
Может пригодится, в случае написания конструкций наподобие:
выстрел, столкновение, смерть (ф-ции). поверх основного потока.

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
function Synchronization()
{
    this.isFree = true;
    this.currentNumber = 0;
    this.lastNumber = 0;
}
 
Synchronization.prototype.synchronizeCall = function (handler, timeInterval, pauseInMilliseconds) {
    var self = this;
    var number = this.lastNumber++;
    var syncTimerId = setInterval(function () {
        if (self.isFree == true && number == self.currentNumber) {
            self.isFree = false;
            self.currentNumber++;
            handler();
 
            clearInterval(syncTimerId);
 
            if (pauseInMilliseconds > 0) {
                self.waitFree(pauseInMilliseconds, timeInterval);
            }
            else {
                self.isFree = true;
            }
 
        }
    }, timeInterval);
}
 
Synchronization.prototype.waitFree = function (milliseconds, timeInterval)
{
    var self = this;
    var startTime = Date.now();
    var waitTimerId = setInterval(function () {
        if (Date.now() - startTime >= milliseconds) {
            self.isFree = true;
            clearInterval(waitTimerId);
        }
    }, timeInterval);
}
гипотетическое использование (рассматривать как псевдокод).
выстрел, столкновение, смерть (ф-ции). поверх основного потока будут работать последовательно
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
function Game()
{
    this.shooterSync = new Synchronization();
    this.shooter = new Player();
    this.targetPray = new Player();
    this.graphics = new Graphics();
    this.init();
}
 
Game.prototype.init = function()
{
    var self = this;
    this.shooter.onMouseClick = function() 
    {
        self.shoot();   
        self.shock();
        self.kill();
    };
    this.graphics.init();
    this.graphics.addPlayer(this.shooter);
    this.graphics.addPlayer(this.targetPray);
}
 
Game.prototype.shoot = function()
{
    var self = this;
    var handler = function() {
        self.shooter.shoot();
    }
 
    this.shooterSync.synchronizeCall(handler, 100, 0);
}
 
Game.prototype.shock = function()
{
    var self = this;
    var handler = function() {
        self.targetPray.shock();
    }
 
    this.shooterSync.synchronizeCall(handler, 100, 0);
}
 
Game.prototype.kill = function()
{
    var self = this;
    var handler = function() {
        self.targetPray.kill();
    }
 
    this.shooterSync.synchronizeCall(handler, 100, 0);
}
0
tezaurismosis
Администратор
Эксперт .NET
8574 / 3871 / 730
Регистрация: 17.04.2012
Сообщений: 8,616
Записей в блоге: 14
28.09.2016, 18:08 51
Ваша первая игра на JavaScript и Phaser (перевод)
0
cyb0rg_01
Фрилансер
617 / 340 / 96
Регистрация: 05.05.2014
Сообщений: 2,441
05.10.2016, 13:28 52
Наверное лучшая библиотека для создания древовидных структур, поддержка DnD, гибкость и простота использования:
https://www.jstree.com/demo/
0
Fedor Vlasenko
Программист Php, Js
Эксперт PHP
817 / 550 / 215
Регистрация: 01.02.2015
Сообщений: 1,690
05.10.2016, 14:25 53
Цитата Сообщение от pro_100_gram Посмотреть сообщение
Наверное лучшая библиотека для создания древовидных структур, поддержка DnD, гибкость и простота использования:
Мой выбор Dinatree
0
cyb0rg_01
Фрилансер
617 / 340 / 96
Регистрация: 05.05.2014
Сообщений: 2,441
05.10.2016, 15:17 54
Fedor Vlasenko, мне эта понравилась простотой и возможностями: за 6 часов 90% необходимых возможностей изучил, для полного манипулирования каталогами, файлами, настройками и прочее.
0
cyb0rg_01
Фрилансер
617 / 340 / 96
Регистрация: 05.05.2014
Сообщений: 2,441
21.11.2016, 16:08 55
Наконец-то понял кватернионы. простейшая 3D-леталка на three.js в честь этого (управление WASDQE + мышь):

http://codepen.io/pro_100_gram/pen/LbWZyv


PHPHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<html>
    <head>
        <title>SpaceShip</title>
        <style>
            body { margin: 0; }
        </style>
    </head>
    <body>
        <script src="three.min.js"></script>
 
        <script>    
            var loader = new THREE.JSONLoader();
            loader.load("https://api.myjson.com/bins/2w5m2", function (geom, mater) {
                var mater = new THREE.MeshNormalMaterial({ color: 0x00ff00 });
                var spaceShip = new THREE.Mesh(geom, mater);
                onLoadCompleted(spaceShip);
            });
 
 
            var onLoadCompleted = function (spaceShip) {
                var scene = new THREE.Scene();
                var camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 0.1, 2000);
 
                var renderer = new THREE.WebGLRenderer({ antialias: true });
                renderer.setSize(window.innerWidth, window.innerHeight);
                document.body.appendChild(renderer.domElement);
 
                var geometry = new THREE.BoxGeometry(10, 10, 10);
                var material = new THREE.MeshNormalMaterial({ color: 0x00ff00 });
                var cube = new THREE.Mesh(geometry, material);
 
                cube.position.z = -300;
                cube.position.y = 10;
 
                camera.position.y = 10;
                camera.position.z = 30;
                spaceShip.rotation.y = Math.PI;
                camera.lookAt(new THREE.Vector3(0, 5, 0));
 
                scene.add(cube);
 
                var group = new THREE.Object3D();
                group.add(spaceShip);
                group.add(camera);
 
                scene.add(group);
 
                for (var i = 0; i < 300; ++i) {
                    var dotGeometry = new THREE.Geometry();
                    dotGeometry.vertices.push(new THREE.Vector3(Math.random() * (1500 + 1500) - 1500, Math.random() * (1500 + 1500) - 1500, Math.random() * (1500 + 1500) - 1500));
                    var dotMaterial = new THREE.PointCloudMaterial({ size: 1, sizeAttenuation: true });
                    var dot = new THREE.Points(dotGeometry, dotMaterial);
                    scene.add(dot);
                }
 
                var cameraControl = new CameraControl(group);
 
                var render = function () {
                    cameraControl.update();
                    requestAnimationFrame(render);
                    renderer.render(scene, camera);
                };
 
                render();
            }
 
 
            function CameraControl(object3D) {
                var rotationQuaternion = new THREE.Quaternion();
                var rotationVector = new THREE.Vector3(0, 0, 0);
                var movingVector = new THREE.Vector3(0, 0, 0);
                var rotationSpeed = 0.01;
                var movingSpeed = 1;
 
                this.update = function () {
                    object3D.translateX(movingVector.x);
                    object3D.translateY(movingVector.y);
                    object3D.translateZ(movingVector.z);
 
                    rotationQuaternion.set(rotationVector.x, rotationVector.y, rotationVector.z, 1).normalize();
                    object3D.quaternion.multiply(rotationQuaternion);
                    object3D.rotation.setFromQuaternion(object3D.quaternion, object3D.rotation.order);
 
 
                };
 
                window.addEventListener('keydown', function (event) {
                    if (event.keyCode == 87) {
                        movingVector.z = -1;
                    }
                    else if (event.keyCode == 83) {
                        movingVector.z = 1;
                    }
                    else if (event.keyCode == 65) {
                        movingVector.x = -1;
                    }
                    else if (event.keyCode == 68) {
                        movingVector.x = 1;
                    }
                    else if (event.keyCode == 81) {
                        movingVector.y = -1;
                    }
                    else if (event.keyCode == 69) {
                        movingVector.y = 1;
                    }
                    movingVector.multiplyScalar(movingSpeed);
                });
                window.addEventListener('keyup', function (event) {
                    if (event.keyCode == 87) {
                        movingVector.z = 0;
                    }
                    else if (event.keyCode == 83) {
                        movingVector.z = 0;
                    }
                    else if (event.keyCode == 65) {
                        movingVector.x = 0;
                    }
                    else if (event.keyCode == 68) {
                        movingVector.x = 0;
                    }
                    else if (event.keyCode == 81) {
                        movingVector.y = 0;
                    }
                    else if (event.keyCode == 69) {
                        movingVector.y = 0;
                    }
                });
 
                window.addEventListener('mousemove', function (event) {
                    rotationVector.y = (window.innerWidth / 2 - event.clientX) / (window.innerWidth / 2) * rotationSpeed;
                    rotationVector.x = (window.innerHeight / 2 - event.clientY) / (window.innerHeight / 2) * rotationSpeed;
                });
            }
        </script>
    </body>
</html>
0
Опан
Юзер с абсолютным слухом
577 / 387 / 158
Регистрация: 17.12.2010
Сообщений: 1,162
01.03.2017, 12:20 56
Простой конвертер аудиофайлов из формата WAW в формат МП3 с использованием библиотеки libmp3lame.min.js
Хочу предложить конвертер из WAW в МП3. Это - результат упрощения мной сложного примера, найденного в интернете. Изначально этот пример был рассчитан на конвертирование только монофонических WAV-файлов. Правда, после того, как я подключил возможность конвертировать стереофайлы, теперь они обрабатываются корректно, а вот монофайлы тоже с натяжкой конвертируютя, но при этом почему-то используют до 500 мб оперативки.
Откуда я был скачал исходный пример и библиотеку, я уже сейчас к сожалению не смог найти, поэтому отправляю во вложении библиотеку, так же тестовый WAV-файл и результат конвертирования:
PHPHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html>
<head>
    <title>Конвертер из WAV в MP3</title>
    <meta charset="windows-1251">
</head>
<body bgcolor=#ccc><center>
<h3>Конвертер из WAV в MP3</h3>
<audio id=audio controls></audio><br><br>
<div id="fileInputContainer">
    <input id=myfile type=file onchange="myconverting(this.files[0])">
</div><br>
<a id=mydownloadlink style="display:none">тут будет ссылка на скачивание MP3</a>
<script src="libmp3lame.min.js"></script>
<script>
function myconverting(blob){
    mydownloadlink.href="";
    mydownloadlink.innerHTML="подождите...";
    mydownloadlink.style.display="block";
    var fileReader=new FileReader();
    fileReader.readAsArrayBuffer(blob);
    fileReader.onload=function(){
        var arrayBuffer=this.result;
        var buffer=new Uint8Array(arrayBuffer);
        function readInt(i,bytes){
            var ret=0,shft=0;
            while(bytes){
                ret+=buffer[i]<<shft;
                shft+=8;
                i++;
                bytes--;
            };
            return ret;
        };
        var sampleRate=readInt(24,4);
        var bitsPerSampl=readInt(34,2);
        var numchannels=readInt(30,1); // определяем количество стереоканалов в файле - 1 или 2 
        var splitchannels=2*Math.floor(numchannels/2);
        var samples=buffer.subarray(44);
        mp3codec = Lame.init();
        Lame.set_mode(mp3codec,1);
        Lame.set_num_channels(mp3codec,2);
        Lame.set_num_samples(mp3codec,samples);
        Lame.set_in_samplerate(mp3codec,sampleRate);
        Lame.set_out_samplerate(mp3codec,sampleRate);
        Lame.set_bitrate(mp3codec,128); // задаём битрейт
        Lame.init_params(mp3codec);
        var f32Buffer_l=new Float32Array(samples.length/numchannels);
        var f32Buffer_r=new Float32Array(samples.length/numchannels);
        for(var i=0;i<samples.length/numchannels;i++){
            f32Buffer_l[i]=(samples[i*2*numchannels]+((samples[i*2*numchannels+1]^128)*256)-0x8000)/0x8000;
            f32Buffer_r[i]=(samples[i*2*numchannels+splitchannels]+((samples[i*2*numchannels+splitchannels+1]^128)*256)-0x8000)/0x8000;
        }
        var mp3data=Lame.encode_buffer_ieee_float(mp3codec,f32Buffer_l,f32Buffer_r); // конвертируем
        Lame.close(mp3codec);
        mp3codec=null;
        var binary="",bytes=new Uint8Array(mp3data.data);
        for (var i=0;i<bytes.byteLength;i++){binary+=String.fromCharCode(bytes[i]);};
        var url='data:audio/mp3;base64,'+window.btoa(binary);
        audio.src=url;
        audio.play(); // играем
        mydownloadlink.href=url;
        mydownloadlink.innerHTML="с к а ч а т ь"; // качаем
        var nd=new Date();
        mydownloadlink.download=nd.getFullYear()+""+az(nd.getMonth()+1)+""+az(nd.getDate())+""+az(nd.getHours())+""+az(nd.getMinutes())+""+az(nd.getSeconds())+".mp3";
        fileInputContainer.innerHTML = fileInputContainer.innerHTML;
        function az(i){return(i<10)?"0"+i:i;};
    };
};
</script>
</center></body>
</html>
В браузере Опера к сожалению не работает.
0
Вложения
Тип файла: zip lamemin.zip (827.3 Кб, 1 просмотров)
8Observer8
2290 / 1457 / 234
Регистрация: 05.10.2013
Сообщений: 4,480
Записей в блоге: 56
17.11.2017, 16:49 57
Минимальная программа на WebGL (это эквивалент OpenGL ES 2.0 для браузера), которая выводит красную точку размеров 10 пикселей в координате (0, 0, 0)

https://jsfiddle.net/8Observer8/8kduku4r/1/

PHPHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Shortest Program</title>
</head>
 
<body>
    <canvas id="renderCanvas" width="200" height="200" style="border: 1px solid black;"></canvas>
 
    <script>
        var VSHADER_SOURCE =
            'void main()\n' +
            '{\n' +
            '    gl_Position = vec4(0.0, 0.0, 0.0, 1.0);\n' +
            '    gl_PointSize = 10.0;\n' +
            '}\n';
 
        var FSHADER_SOURCE =
            'void main()\n' +
            '{\n' +
            '    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' +
            '}\n';
 
        function main()
        {
            var gl = document.getElementById('renderCanvas').getContext('webgl');
            var vShader = gl.createShader(gl.VERTEX_SHADER);
            gl.shaderSource(vShader, VSHADER_SOURCE);
            gl.compileShader(vShader);
            var fShader = gl.createShader(gl.FRAGMENT_SHADER);
            gl.shaderSource(fShader, FSHADER_SOURCE);
            gl.compileShader(fShader);
            var program = gl.createProgram();
            gl.attachShader(program, vShader);
            gl.attachShader(program, fShader);
            gl.linkProgram(program);
            gl.useProgram(program);
            gl.drawArrays(gl.POINTS, 0, 1);
        }
        main();
    </script>
</body>
 
</html>
1
8Observer8
2290 / 1457 / 234
Регистрация: 05.10.2013
Сообщений: 4,480
Записей в блоге: 56
19.11.2017, 10:50 58
Минимальная программа на WebGL версии 2.0. WebGL 2.0 базируется на OpenGL ES 3.0. Пример выводит точку красного цвета размером 10 пикселей.

https://jsfiddle.net/8Observer8/9b2k6mr8/

Название: 001_point-in-webgl2.png
Просмотров: 56

Размер: 722 байт

PHPHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Shortest Program</title>
</head>
 
<body>
    <canvas id="renderCanvas" width="200" height="200" style="border: 1px solid rgb(159, 133, 230);"></canvas>
 
    <script>
        var vertexShaderSource =
            `#version 300 es
 
    void main()
    {
        gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
        gl_PointSize = 10.0;
    }`
 
        var fragmentShaderSource =
            `#version 300 es
 
    precision mediump float;
 
    out vec4 outColor;
 
    void main()
    {
        outColor = vec4(1.0, 0.0, 0.0, 1.0);
    }`;
 
        function main()
        {
            var gl = document.getElementById('renderCanvas').getContext('webgl2');
 
            var vShader = gl.createShader(gl.VERTEX_SHADER);
            gl.shaderSource(vShader, vertexShaderSource);
            gl.compileShader(vShader);
 
            var fShader = gl.createShader(gl.FRAGMENT_SHADER);
            gl.shaderSource(fShader, fragmentShaderSource);
            gl.compileShader(fShader);
 
            var program = gl.createProgram();
            gl.attachShader(program, vShader);
            gl.attachShader(program, fShader);
            gl.linkProgram(program);
            gl.useProgram(program);
 
            gl.drawArrays(gl.POINTS, 0, 1);
        }
        main();
    </script>
</body>
 
</html>
1
8Observer8
2290 / 1457 / 234
Регистрация: 05.10.2013
Сообщений: 4,480
Записей в блоге: 56
19.11.2017, 23:19 59
Создал тему: Небольшие примеры на WebGL Если вам интересно, то подписывайтесь и выкладывайте свои примеры.
1
Опан
Юзер с абсолютным слухом
577 / 387 / 158
Регистрация: 17.12.2010
Сообщений: 1,162
12.12.2017, 12:16 60
Пианино на JavaScript + CSS

Хочу предложить пианино на JavaScript и CSS. Играть можно мышью или на клавиатуре компьютера, так же автоматически. Соотстветствие клавиш на пианино клавишам на компьютере указано на виртуальных клавишах пианино в виде символов. Слишком долго клавиши на клавиатуре компьютера не держите, так как наступит многократное повторение нажатия, как при написании текста. Как лучше от этого избавиться, пока не решил.
Пианино имеет стерезвук с эффектом места расположения клавиш в пространстве. Поддерживается полифония до шести одновременно звучащих нот. Если нажать большее количество клавиш одновременно - консоль выдаст ошибку.
По нажатию имитируется звук трёх струн, настроенных на одну и ту же ноту с определённой погрешностью, степень которой зависит от значения переменной detune.
От переменной rightPedal зависит имитация нажатия на правую педаль настоящего пианино - когда она не нажата, ноты перестают звучать после отпускания клавиш, если нажата - продолжают звучать, пока не затухнут.
Недостаток - подвисает, если маловато свободной оперативной памяти.
PHPHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
<!DOCTYPE html>
<html>
<head>
    <meta charset="windows-1251">
    <title>Пианино</title>
    <style>
    .white_keys{
        position: absolute;
        background: white;
        border: 2px solid;
        width: 25px;
        height: 200px;
        top: 0px;
        border-radius: 0px 0px 5px 5px;
        z-index: 0;
        text-align: center;
        line-height: 200px;
        -webkit-user-select: none;
        -moz-user-select: none;
    }
    .white_keys:hover{
        background: #eee;
    }
    .black_keys{
        position: absolute;
        background: black;
        border: 2px solid;
        border-color: #333;
        width: 15px;
        height: 130px;
        top: 0px;
        border-radius: 0px 0px 7px 7px;
        z-index: 1;
        color: white;
        text-align: center;
        line-height: 130px;
        -webkit-user-select: none;
        -moz-user-select: none;
    }
    .black_keys:hover{
        background: #333;
    }
    </style>
</head>
<body bgcolor=#ccc><center><h3>Пианино</h3>
<button id=start1 onclick="playDemo(demoString1)"> Старт демо-1 </button> 
<button id=start2 onclick="playDemo(demoString2)"> Старт демо-2 </button> 
<button onmousedown="clearInterval(demo);start1.disabled=start2.disabled=false;noteDuration=1500"> Стоп демо </button><br><br>
<div id=piano style="position:absolute;left:50%;margin-left:-300px"></div>
<script>
var rightPedal = true, // Нажата ли правая педаль
transpoze = 0, // Можно использовать для изменения тональности
volume = 0.07, // Громкость
camerton = 110, // Для точной настройки стандартных частот нот
detune = 1.005, // Погрешность настройки струн
fadeOut = 1.00004, // От этого зависит время затухания клавиш
noteDuration = 1500, // Длительность нот
stereo = 50, // Стереоэффект
pan = 1.5, // Стереопанорама в пределах 0 - 2 с дробью
lastPressed = lastReleased = 0, // ID последних нажатой и отжатой клавиш
whiteIndex = 0;
myDown = false;
var frameCount = noteDuration * 44.1;
var akkord = [], str = [], fm = [], samples = [];
var symbols = "zsxdcvgbhnjm,l.;/q2w3e4rt6y7ui9o0p-[]",
demoString1 = "VVgcbWFwXG1YE29XWl9tWmtXDm1SVVrDv1XDv1JOUlVew79aw79V&1500&300",
demoString2 = "cnFyCXAOcg12DnACcg52DXAOcgIOdg5wAw0Pcg52BFAOdAYNEhgacg5wB24Obw10Dm4Cbw50DW4ObwcTdA5uCBQNGm8OdAlVDm4LDRcabw50CTB2w78SGBowdTB2QjB1EhgaMHbDvwkwecO/EhgaMHgweUIweBIYGjB5w78HEy8yd8O/BlLDvwRQw78CTgdTw78HUwZSw78EUHICDnFyCXAOcg12DnACcg52DXAOcgIOdg5wAw0Pcg52BFAOdAYNEhgacg5wB24Obw10Dm4Cbw50DW4ObwcTdA5uCBQNGm8OdAlVDm4LDRcabw50CHRsFBcab3REchQXGnBvCW1sFRgcbXREbRUYHHB0B2NmFBcaa29Cam3DvxMjJmvDv8O/w78HLzJ3&400&130",
keyAsociateEncode = "WlNYRENWR0JITkpNwrxMwr7CusK/UTJXM0U0UlQ2WTdVSTlPMFDCvcObw50=";
var keyAsociate = decodeURIComponent(escape(window.atob(keyAsociateEncode)));
for (var i = 0; i < 37; i++){
    var key = document.createElement("div");
    key.id = i + 12;
    var n = i - 12 * Math.floor(i / 12);
    var keyColor = (n == 1 || n == 3 || n == 6 || n == 8 || n == 10 ? 1 : 0);
    if(keyColor == 1){
        key.className = "black_keys";
    }else{
        key.className = "white_keys";
        whiteIndex++;
    }
    key.setAttribute("data-color", keyColor);
    key.setAttribute("data-left", (19 * keyColor + 28 * whiteIndex) - 36);
    key.style.left = key.dataset.left + "px";
    key.innerHTML = symbols[i];
    key.onmousedown = function(){
        akkord[0] = this.id;
        downKey(akkord);
    }
    key.onmouseup = function(){
        akkord[0] = this.id;
        upKey(akkord);
    }
    key.onmouseout = function(){if(myDown == true)changeStateKey(this, 0)};
    document.getElementById("piano").appendChild(key);
}
for (var i = 0; i < 60; i++){
    var amplitude = 1;
    var resonance = 1;
    var polarity = 1;
    var f = Math.pow(1.06, i); // Стандартная частота ноты с номером в i
    samples.push([]);
    for (var h = 0; h < 3; h++)str[h] = Math.pow(detune, Math.random() * 2 - 1);
    for (var j = 0; j < frameCount; j++) {
        if(Math.sin(j / camerton * f) * polarity < 0){
            polarity = -polarity;
            resonance = 1;
        }
        amplitude /= fadeOut;
        resonance /= 1.01;
        for (var h = 0; h < 3; h++)fm[h] = 50 * Math.sin( j / camerton * f * Math.floor(12 / f) * str[h]) * resonance;
        samples[i][j] = 0;
        for (var h = 0; h < 3; h++) {
            var garmony = (j + fm[h]) / camerton * f * str[h];
            samples[i][j] += Math.sin(garmony) + Math.sin(garmony * 2);
        }
        samples[i][j] *= volume * amplitude;
    }
}
document.onmousedown = function(){myDown = true};
document.onmouseup = function(){myDown = false};
document.onkeydown = function(e){
    akkord[0] = keyAsociate.indexOf(String.fromCharCode(e.which)) + 12;
    if(akkord[0] > 11)downKey(akkord);
}
document.onkeyup=function(e){
    akkord[0] = keyAsociate.indexOf(String.fromCharCode(e.which)) + 12;
    if(akkord[0] > 11)upKey(akkord);
}
function downKey(e){ // Нажатие клавиши пианино
    lastPressed = e[0].id;
    var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    audioCtx.sampleRate = 44100;
    var frameCount = audioCtx.sampleRate * noteDuration / 1000;
    var myArrayBuffer = audioCtx.createBuffer(2, frameCount, audioCtx.sampleRate);
    for (var c = 0; c < e.length; c++){
        changeStateKey(document.getElementById(e[c]), 1);
        var stereoSeek = Math.floor((e[c] - 30) * stereo);
        for(lr = 0; lr < 2; lr++){
            var nowBuffering = myArrayBuffer.getChannelData(lr);
            for (var s = 0; s < frameCount; s++){
                var evolute = Math.min((lr * 2 - 1) * ((e[c] / 30) - 1) * pan + 1, 1);
                var sample = samples[parseInt(e[c]) + transpoze][s + stereoSeek * ( lr * 2 - 1)];
                if(sample)nowBuffering[s] += sample * evolute;
            }
        }
    }
    var source = audioCtx.createBufferSource();
    source.buffer = myArrayBuffer;
    source.connect(audioCtx.destination);
    source.start();
    if(rightPedal == false){
        var vPeriod = setInterval(function(){
            if(lastReleased == lastPressed){
                source.stop();
                clearInterval(vPeriod);
                lastPressed = lastReleased = 0;
            }
        }, 200);
    }
    setTimeout(function(){audioCtx.close()}, noteDuration);
}
function upKey(e){ // Отжатие клавиши пианино
    lastReleased = e[0].id;
    for (var c = 0; c < e.length; c++)changeStateKey(document.getElementById(e[c]), 0);
}
function changeStateKey(id, act){ // Установка состояния клавиш
    if(id){
        var colorBar = ["white", "#ffb", "black", "#009"]; // Цвета для разных состояний клавиш
        id.style.background = colorBar[parseInt(id.dataset.color) * 2 + act];
        id.style.top = (act * 2) + "px";
        id.style.left = (parseInt(id.dataset.left) + act) + "px";           
    }
}
function playDemo(demoString){ // Воспроизведение демок
    start1.disabled = start2.disabled = true;
    var demoArray = demoString.split("&");
    var dbs = decodeURIComponent(escape(window.atob(demoArray[0])));
    noteDuration = demoArray[1];
    var period = demoArray[2];
    var tc = 0; // time counter
    demo = setInterval(function(){
        if(dbs.charCodeAt(tc) != 255){
            var akkord = [];
            while(dbs.charCodeAt(tc) < 64){
                akkord.push(dbs.charCodeAt(tc));
                tc++;
            }
            akkord.push(dbs.charCodeAt(tc) - 64);
            tc++;
            downKey(akkord);
            setTimeout(function(){upKey(akkord)}, period * 0.75);
        }else{
            tc++;
        }
        if(tc == dbs.length){
            clearInterval(demo);
            start1.disabled = start2.disabled = false;
            noteDuration = 1500;
        }
    }, period);
}
</script>
</body>
</html>
2
Миниатюры
Обмен готовыми решениями  
12.12.2017, 12:16
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
12.12.2017, 12:16

Обмен готовыми решениями
&lt;?PHP echo getfilesize($_GET); // Функция для определения размера function...

Обсуждение класса постраничной навигации из темы "Обмен готовыми решениями"
Выделено из темы: http://www.cyberforum.ru/php/thread158262-page2.html Para bellum, может стоит...

Как запускать браузер с готовыми настройками?
пишу этот код, но всё равно выдаёт ошибку: InvalidOperationException не обработано пользовательским...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
60
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru