Обмен готовыми решениями - JavaScript - Страница 4

@andyj · 20.12.2017, 07:13

div-кнопка с бортиками с управляемым углом освещения. ("проба пера")

HTML5

<!doctype html><html><head><title>Angle Light</title><meta charset='utf-8' />
<style type="text/css">
.button1{
    padding: 13px; margin: 13px;
    color:#000000;
    background: #eeeeee;
    border: 14px solid #888888;
}
</style>
</head>
<body>
 
<div class="button1" id="button1">text1</div>
<div class="button1" id="button2">text2</div>
<div class="button1" id="button3">text3</div>
    
<script>
    function angleColor(btn, angle){
        if(angle==null) angle=30;
        angle = angle*Math.PI/180;
        var t=(150+50*Math.sin(angle)).toFixed(0);
        var l=(150+50*Math.cos(angle)).toFixed(0);
        var r=(150-50*Math.cos(angle)).toFixed(0);
        var b=(150-50*Math.sin(angle)).toFixed(0);
        btn.style.borderTopColor = 'rgb('+t+', '+t+', '+t+')';
        btn.style.borderLeftColor = 'rgb('+l+', '+l+', '+l+')';
        btn.style.borderRightColor = 'rgb('+r+', '+r+', '+r+')';
        btn.style.borderBottomColor = 'rgb('+b+', '+b+', '+b+')';
    }
 
    var angle=0;
    function onTimer(){
        angleColor(document.getElementById("button1"), angle);
        angleColor(document.getElementById("button2"), angle);
        angleColor(document.getElementById("button3"), angle);
        angle=(angle+2)%360;
    }
    onTimer()
    setInterval(onTimer, 30);
</script>
 
</body></html>

@8Observer8 · 11.01.2018, 00:38

Предлагаю делиться проектами/примерами на Three.js и Babylon.js в этой теме: Проекты на Three.js и Babylon.js

@Eva Rosalene · 19.03.2018, 21:14

Хак transition для width/height: auto.
На backquote вместо нормальных кавычек внимания не обращайте, клавиатура приказала долго жить.

Перед изменением контента использовать .lockBounds, после - .fitContent(duration).
Настоятельная рекомендация вместо вызова конструктора использовать AutoBoundsTransition.for(element), либо упрощённую обёртку AutoBoundsWrapper(element, duration) с методом .resize(callback), передавая в callback функцию, которая и производит изменение размеров элемента.

Совместимость: ES6+.
Версия для ES5 после транспайла бабелем - под спойлером, требует babel-polyfill.

Javascript

class AutoBoundsTransition {
  static for(node) {
    if (!this._context) this._context = new WeakMap();
    if (!this._context.has(node)) this._context.set(node, new this(node));
    
    return this._context.get(node);
  }
  
  pRequestAnimationFrame() {
    return new Promise(resolve => requestAnimationFrame(resolve));
  }
  
  constructor(node) {
    this.node = node;
  }
  
  lockBounds() {
    this.lockedWidth = this.node.getBoundingClientRect().width;
    this.lockedHeight = this.node.getBoundingClientRect().height;
    
    this.oldHeight = this.node.style.height;
    this.oldWidth = this.node.style.width;
    
    this.node.style.width = this.lockedWidth + `px`;
    this.node.style.height = this.lockedHeight + `px`;
  }
  
  waitTransitionFinish() {
    let resolve = null;
    let promise = new Promise(res => resolve = res);
    
    this.node.addEventListener(`transitionend`, function listener(event) {
      event.target.removeEventListener(`transitionend`, listener, true);
      resolve();
    }, true);
    return promise;
  }
  
  async fitContent(duration) {
    let oldTransition = this.node.style.transition;
    this.node.style.height = this.oldHeight;
    this.node.style.width = this.oldWidth;
    
    await this.pRequestAnimationFrame();
    let newWidth = this.node.getBoundingClientRect().width;
    let newHeight = this.node.getBoundingClientRect().height;
    
    this.node.style.width = this.lockedWidth + `px`;
    this.node.style.height = this.lockedHeight + `px`;
    
    await this.pRequestAnimationFrame();
    this.node.style.transition = `height ${duration}ms, width ${duration}ms`;
    this.node.style.height = newHeight + `px`;
    this.node.style.width = newWidth + `px`;
    
    await this.waitTransitionFinish();
    this.node.style.transition = null;
    this.node.style.height = this.oldHeight;
    this.node.style.width = this.oldWidth;
  }
}
 
class AutoBoundsWrapper {
  constructor(node, duration=500) {
    this.autoBoundsTransition = AutoBoundsTransition.for(node);
    this.duration = duration;
  }
  
  async resize(resizer) {
    this.autoBoundsTransition.lockBounds();
    resizer();
    await this.autoBoundsTransition.fitContent(this.duration);
  }
}

Демо: https://jsfiddle.net/bnhqcyz2/16/

ES5-совестимый код (Babel)

Внимание! Требуются полифиллы: https://babeljs.io/docs/usage/polyfill

Javascript

"use strict";
 
function _asyncToGenerator(fn) {
  return function() {
    var gen = fn.apply(this, arguments);
    return new Promise(function(resolve, reject) {
      function step(key, arg) {
        try {
          var info = gen[key](arg);
          var value = info.value;
        } catch (error) {
          reject(error);
          return;
        }
        if (info.done) {
          resolve(value);
        } else {
          return Promise.resolve(value).then(
            function(value) {
              step("next", value);
            },
            function(err) {
              step("throw", err);
            }
          );
        }
      }
      return step("next");
    });
  };
}
 
function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
}
 
var AutoBoundsTransition = (function() {
  AutoBoundsTransition.for = function _for(node) {
    if (!this._context) this._context = new WeakMap();
    if (!this._context.has(node)) this._context.set(node, new this(node));
 
    return this._context.get(node);
  };
 
  AutoBoundsTransition.prototype.pRequestAnimationFrame = function pRequestAnimationFrame() {
    return new Promise(function(resolve) {
      return requestAnimationFrame(resolve);
    });
  };
 
  function AutoBoundsTransition(node) {
    _classCallCheck(this, AutoBoundsTransition);
 
    this.node = node;
  }
 
  AutoBoundsTransition.prototype.lockBounds = function lockBounds() {
    this.lockedWidth = this.node.getBoundingClientRect().width;
    this.lockedHeight = this.node.getBoundingClientRect().height;
 
    this.oldHeight = this.node.style.height;
    this.oldWidth = this.node.style.width;
 
    this.node.style.width = this.lockedWidth + "px";
    this.node.style.height = this.lockedHeight + "px";
  };
 
  AutoBoundsTransition.prototype.waitTransitionFinish = function waitTransitionFinish() {
    var resolve = null;
    var promise = new Promise(function(res) {
      return (resolve = res);
    });
 
    this.node.addEventListener(
      "transitionend",
      function listener(event) {
        event.target.removeEventListener("transitionend", listener, true);
        resolve();
      },
      true
    );
    return promise;
  };
 
  AutoBoundsTransition.prototype.fitContent = (function() {
    var _ref = _asyncToGenerator(
      /*#__PURE__*/ regeneratorRuntime.mark(function _callee(duration) {
        var oldTransition, newWidth, newHeight;
        return regeneratorRuntime.wrap(
          function _callee$(_context) {
            while (1) {
              switch ((_context.prev = _context.next)) {
                case 0:
                  oldTransition = this.node.style.transition;
 
                  this.node.style.height = this.oldHeight;
                  this.node.style.width = this.oldWidth;
 
                  _context.next = 5;
                  return this.pRequestAnimationFrame();
 
                case 5:
                  newWidth = this.node.getBoundingClientRect().width;
                  newHeight = this.node.getBoundingClientRect().height;
 
                  this.node.style.width = this.lockedWidth + "px";
                  this.node.style.height = this.lockedHeight + "px";
 
                  _context.next = 11;
                  return this.pRequestAnimationFrame();
 
                case 11:
                  this.node.style.transition =
                    "height " + duration + "ms, width " + duration + "ms";
                  this.node.style.height = newHeight + "px";
                  this.node.style.width = newWidth + "px";
 
                  _context.next = 16;
                  return this.waitTransitionFinish();
 
                case 16:
                  this.node.style.transition = null;
                  this.node.style.height = this.oldHeight;
                  this.node.style.width = this.oldWidth;
 
                case 19:
                case "end":
                  return _context.stop();
              }
            }
          },
          _callee,
          this
        );
      })
    );
 
    function fitContent(_x) {
      return _ref.apply(this, arguments);
    }
 
    return fitContent;
  })();
 
  return AutoBoundsTransition;
})();
 
var AutoBoundsWrapper = (function() {
  function AutoBoundsWrapper(node) {
    var duration =
      arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 500;
 
    _classCallCheck(this, AutoBoundsWrapper);
 
    this.autoBoundsTransition = AutoBoundsTransition.for(node);
    this.duration = duration;
  }
 
  AutoBoundsWrapper.prototype.resize = (function() {
    var _ref2 = _asyncToGenerator(
      /*#__PURE__*/ regeneratorRuntime.mark(function _callee2(resizer) {
        return regeneratorRuntime.wrap(
          function _callee2$(_context2) {
            while (1) {
              switch ((_context2.prev = _context2.next)) {
                case 0:
                  this.autoBoundsTransition.lockBounds();
                  resizer();
                  _context2.next = 4;
                  return this.autoBoundsTransition.fitContent(this.duration);
 
                case 4:
                case "end":
                  return _context2.stop();
              }
            }
          },
          _callee2,
          this
        );
      })
    );
 
    function resize(_x3) {
      return _ref2.apply(this, arguments);
    }
 
    return resize;
  })();
 
  return AutoBoundsWrapper;
})();

@NX9000 · 26.08.2018, 21:53

Библиотека для работы с JSON данными включающими в себя логические ветвления.

https://www.npmjs.com/package/jsoncode

@Kraken73 · 26.10.2018, 09:07

написал плагин для выделения последней строки в тексте, т.к. в инете кривоватый был
принимаются идеи по улучшению кода\плагина
https://github.com/Kovich73/lastLine

@Опан · 27.11.2018, 15:30

Онлайн радиостанция без специального сервера и передающего ПО

Хочу предложить онлайн радиостанцию, организованную в обход традиционного подхода к созданию радио онлайн - без традиционного аудиострима, специальной серверной платформы, вещающих программ и многого другого.
В варианте, который я хочу предложить, достаточно обычного сайта на обычном сервере, даже без PHP, а радиовещание в автоматическом режиме отвечает элемент аудио. Может это так же можно назвать имитацией вещания, но результат имеет такой же эффект - на одновременно открытых страницах даже на разных компьютерах в одно и то же время звучит одно и тоже, как при прослушивании радио. Но любом случае реализазии онлайн радио звук всегда берётся из файлов, которые где-то "лежат". Кроме этого в этом примере выводится история раннее прослушанного в недалёком времени. Алгоритм автосоставления плейлиста таков: в течении одного цикла плейлиста композиции воспроизводятся в случайном порядке, но не повторяются.
Перед первым запуском кода нужно будет сделать кое-какую подготовку - прежде всего желательно загрузить все аудиофайлы на сервер. (они могут быть мультимедийными или содержащими рекламу) Так, как тут всё обходится без PHP и библиотек, в сроках с 68 по 70 нужно будет прописать соответственно пути к файлам, названия треков и их длительности в секундах, которые должны иметь точность более, чем в секунду, чем точнее, тем лучше. Этот пример рассчитан на 10 треков, но количество можно изменить.
Кроме этого нужно будет посчитать суммарную длительность треков в плейлисте и записать её в переводе на милисекунды в 75 строке. А так же посчитать, сколько раз плейлист успел бы воспроизвестись с 1 января 1970 г., и записать это число в 73 строке.

PHP/HTML

<html>
<head>
    <title>Радио</title>
    <style>
    body{
        background: #ccc;
        font-family: arial;
    }
    button{
        width: 150px;
        border-radius: 7px;
        background: #033;
        color: white;
    }
    button:hover{
        background: #066;
        color: gold;
        cursor: pointer;
    }
    hr{
        width: 80%;
    }
    #myhistory{
        width: 50%;
        background: black;
        color: white;
        text-align: left;
        padding: 10px;
    }
    .mytime{
        background: black;
        color: #ccc;
    }
    .now_live{
        background: black;
        color: gold;
        width: 100%;
    }
    #mes1{
        background: #444;
        padding: 5px;
        width: 98%;
        display: block;
        border-radius: 5px;
    }
    #mes2{
        background: #444;
        padding: 5px;
        width: 98%;
        display: none;
        border-radius: 5px;
    }
    </style>
</head>
<body><center><h3>Радио</h3>
<button id=myplay onclick="listen()">Слушать</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button onclick="turn_off()">Выключить</button><hr>
<div id=myhistory>
    <span id=mes1> Сейчас в эфире: </span><br><span id=my_time class=mytime> время </span><span id=nowlive class=now_live> тут будет то,что сейчас </span><br><br>
    <span id=mes2> Раньше звучали: <br></span><br>
    <table id=mytable border=0 cellspacing=0></table>
</div>
</center></body>
<script>
var audio = new Audio();
    audioCat = "mp3/", // Путь к папке, где лежат МП3-файлы, если они в отдельной папке
//  audioCat = ""; // В противном случае присваиваем пустую строку
    mp3 = [
        ["track1.mp3", "track2.mp3", "track3.mp3", "track4.mp3", "track5.mp3", "track6.mp3", "track7.mp3", "track8.mp3", "track9.mp3", "track10.mp3"], // Пути к файлам
        ["Исполнитель1 - Трек1", "Исполнитель2 - Трек2", "Исполнитель3 - Трек3", "Исполнитель4 - Трек4", "Исполнитель5 - Трек5", "Исполнитель6 - Трек6", "Исполнитель7 - Трек7", "Исполнитель8 - Трек8", "Исполнитель9 - Трек9", "Исполнитель10 - Трек10"], // Названия
        [376.3232, 338.367275, 187.87585, 187.64075, 221.991775, 529.6244, 133.5047, 223.8597, 265.8839, 270.086] // Длительности треков
    ],
    numTr = mp3[0].length, // Количество треков в плейлисте
    a = 399300, // Количество раз воспроизведения плейлиста с момента 1 января 1970 г. на момент публикации скрипта на сайте - рассчитать самостоятельно и прописать один раз и на постоянно в момент публикации скрипта на сайте
    hst = [[], []], // История раннее прослушанного
    totalDuration = 3859627, // Сумарная длительность в милисекундах всех треков в плейлисте - рассчитать самостоятельно
    mymax = 7; // Максимальное количество треков в истории раннее прослушанного
function getTrack(){ // Получение данных о текущем воспроизводящемся треке, его временной позиции воспроизведения и времени начала воспроизведения
    randArray = []; // Случайные номера треков
    var tek = new Date().getTime();
    var numCycles = Math.floor(tek / totalDuration); // Количество раз воспроизведения плейлиста с момента 1 января 1970 г.
    var ind = 0;
    for(i = 1; i < numTr + 1; i ++){
        for(j = 0; j < numCycles - a; j ++){
            ind ++;
            if(ind == numTr)ind = 0;
            while(randArray[ind]){
                ind ++;
                if(ind == numTr)ind = 0;
            }
        }
        randArray[ind] = i;
    }
    var newCycle = numCycles * totalDuration; // Время начала нового цикла воспроизведения плейлиста
    var mytime = (tek - newCycle)/1000; // Временная позиция воспроизведения всего плейлиста
    var s = 0;
    turn = 0;
    while(s < mytime){
        s += mp3[2][randArray[turn] - 1];
        turn ++;
    }
    turn --;
    index = randArray[turn] - 1; // Индекс (номер) текущего воспроизводимого трека
    var s1 = s - mp3[2][index];
    hour_min = hourmin(newCycle + s1 * 1000);
    curTime = mytime - s1;
}
function listen(){ // Слушаем
    getTrack();
    my_time.innerHTML = "&nbsp;" + hour_min + "&nbsp;&nbsp;&nbsp;";
    nowlive.innerHTML = mp3[1][index];
    audio.src = audioCat + mp3[0][index];
    audio.currentTime = curTime;
    audio.volume = 0.3;
    audio.play();
}
function turn_off(){ // Выключим
    myplay.disabled = true;
    var myInterval = setInterval(function(){
        audio.volume -= 0.03;
        if(audio.volume <= 0.02){
            clearInterval(myInterval);
            audio.pause();
            myplay.disabled = false;
        }
    }, 100);
}
audio.onended = function(){ // Переход на следующий трек
    mes2.style.display = "block";
    if(hst[0].length >= mymax){
        hst[0].shift();
        hst[1].shift();
    }
    hst[0].push(hour_min);
    hst[1].push(index);
    mytable.innerHTML = "";
    for(j = 0; j < hst[0].length; j ++){
        var mytr = document.createElement("tr");
            var mytd = document.createElement("td");
                mytd.className = "mytime";
                mytd.innerHTML = "&nbsp;" + hst[0][hst[0].length - 1 - j] + "&nbsp;&nbsp;&nbsp;";
            mytr.appendChild(mytd);
            var mytd = document.createElement("td");
                mytd.className = "now_live";
                mytd.innerHTML = mp3[1][hst[1][hst[0].length-1-j]];
            mytr.appendChild(mytd);
        mytable.appendChild(mytr);
    }
    getTrack();
    audio.src = audioCat + mp3[0][index];
    audio.play();
    my_time.innerHTML = "&nbsp;" + hourmin() + "&nbsp;&nbsp;&nbsp;";
    nowlive.innerHTML = mp3[1][index];
}
function hourmin(e){
    var newDate = new Date();
    if(e)newDate.setTime(e);
    var ndArray = newDate.toLocaleTimeString().split(":");
    return ndArray[0] + ":" + ndArray[1];
}
getTrack();
my_time.innerHTML = "&nbsp;" + hour_min + "&nbsp;&nbsp;&nbsp;";
nowlive.innerHTML = mp3[1][index];
</script>
</html>

@Опан · 20.03.2020, 18:08

Имитатор АМ-радиоприёмника на базе онлайн-радиопотоков

Хочу предложить имитатор АМ-радиоприёмника с использование обычных аудиостримов. Настройка на станции происходит плавно с помощью <input type=range> и стрелок вправо и влево. При этом имитируются некоторые звуковые эффекты, привычные для АМ-приёмников - помехи, плавные перепады частотной характеристики вещания в зависимости от точности настройки на станцию.
Этот пример рассчитан на 20 станций, но их может быть любое количество. От этого будет зависить только шаг между станциями, обнаруживаемыми во время настройки.

PHP/HTML

<html>
<head>
    <title>имитатор АМ-радиоприёмника</title>
</head>
<body bgcolor=#ccc><center>
<h3>Имитатор АМ-радиоприёмника</h3>
<input id=myrange type=range value=0 max=1000 style="background: red; width: 500px" /><br /><br />
<button onclick="startRadio()"> включить </button>
<button onclick="stopRadio()"> выключить </button>
</body>
<script>
var selectivity = 1.8, // избирательность радиоприёмника
rm = myrange.max,
noise = 3, // после которой по счёту станции имитируется приём помехи
filters = ["highpass", "bandpass"], st,
stations = [
    "http://radiostream1", // пропишите
    "http://radiostream2", // URL-ы
    "http://radiostream3", // всех
        //  ...
    "http://radiostream20" // радиопотоков
];
var m = 0;
for(i = 0; i < stations.length; i ++){
    var audio = new Audio();
    audio.src = stations[i];
    audio.id = "a" + i;
    audio.volume = 0;
    audio.setAttribute("crossorigin", "anonymous");
    audio.onpaused = function(){audio.play()};
    document.body.appendChild(audio);
}
var all = document.getElementsByTagName("audio"),
mystep = rm  / all.length;
function startRadio(){
    myrange.focus();
    var context = new AudioContext();
    var filter = context.createBiquadFilter();
    filter.frequency.value = 1000;
    var gainNode = context.createGain();
    gainNode.gain.setValueAtTime(0, context.currentTime);
    oscillator = context.createOscillator();
    oscillator.frequency.value = 500;
    oscillator.connect(gainNode);
    gainNode.connect(context.destination);
    oscillator.start(0);
    for(i = 0; i < all.length; i ++){
        all["a" + i].play();
        var source = context.createMediaElementSource(document.getElementById("a" + i));
        source.connect(filter);
        filter.connect(context.destination);
    }
    setInterval(function(){
        st = 0;
        for(i = 0; i < all.length; i ++){
            if(i != noise){
                document.getElementById("a" + st).volume = 1 - Math.min(Math.abs(myrange.value - i * mystep - mystep / 2) / (mystep / selectivity), 1);
                st ++;
            }
        }
        filter.frequency.value = Math.min(Math.abs(myrange.value - mystep * Math.floor(myrange.value / mystep) - mystep / 2) * selectivity / 2, mystep / 2) * 300 + 300;
        var noiseVolume = 1 - Math.min(Math.abs(myrange.value - noise * mystep - mystep / 2) / (mystep / selectivity * 1.2), 1);
        gainNode.gain.setValueAtTime(noiseVolume, context.currentTime);
        var filterIndex = Math.floor(myrange.value / mystep) & 1,
        indexFilter = myrange.value / mystep > noise ? filterIndex : 1 - filterIndex;
        filter.type = filters[indexFilter];
    }, 100);
    setInterval(function(){
        oscillator.detune.setValueAtTime(Math.sin(m * 5) * 500, context.currentTime);
        m ++;
    }, 30);
}
document.onkeydown = function(e){myrange.focus()};
function stopRadio(){for(i = 0; i < all.length; i ++) all["a" + i].pause(); oscillator.stop()};
</script>
</center></body>
</html>

К сожалению, не все адреса радиопотоков поддаются обработке с помощью WebAudio Api, поэтому остаётся искать подходящие.

@8Observer8 4176 / 2282 / 387 Регистрация: 05.10.2013 Сообщений: 6,385 Записей в блоге: 177
	11.01.2018, 00:38	62
	Предлагаю делиться проектами/примерами на Three.js и Babylon.js в этой теме: Проекты на Three.js и Babylon.js 0

@NX9000 0 / 0 / 1 Регистрация: 22.06.2015 Сообщений: 9
	26.08.2018, 21:53	64
	Библиотека для работы с JSON данными включающими в себя логические ветвления. https://www.npmjs.com/package/jsoncode 0

@Kraken73 105 / 93 / 50 Регистрация: 17.09.2015 Сообщений: 607
	26.10.2018, 09:07	65
	написал плагин для выделения последней строки в тексте, т.к. в инете кривоватый был принимаются идеи по улучшению кода\плагина https://github.com/Kovich73/lastLine 0

Опции темы