Интернет магазин шабонов
Форма входа

Бесплатный раздел

Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!

Музыкальное сопровождение с использованием SVG

Дата добавления: 07.03.2017 - 13:36
Добавил: Buger
Количество просмотров: 169
Количество комментариев: 0
Размер файла: 3.5Kb
Рейтинг материала: 5.0 / 1
Музыкальное сопровождение с использованием SVG
рейтинг 5.0
/
голосов 1
Интересная реализация для ваших проектов, которая задает музыкальное сопровождение MP3 файлов конкретно под ваш указанный музыкальный файл. Считаю, что применение найдется для него к таким либо вашим проектам. Такое решение встретишь не так часто, по этому выкладываю данный материал. Может кому пригодится.
Как обычно, демонстрация доступна в скачанном файле.

И так, приступим.

Для начала зададим HTML элемента
Код
<svg></svg>

Пропишем стили:
Код
<style class="cp-pen-styles">
svg {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
</style>

Ну а теперь делаем самое основное.
Подключаем необходимые библиотеки. Подключать будем напрямую из CDN :
Код
<script src='https://cdnjs.cloudflare.com/ajax/libs/pizzicato/0.6.0/Pizzicato.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js'></script>

А вот и сам обработчик
Код
<script>
  const path = 'https://alemangui.github.io/audio/piano-electro.mp3' // Прямая ссылка на .mp3 файл
  const sound = new Pz.Sound({
  source: 'file',
  options: {
  path: path,
  loop: true
  }
  }, () => onSoundLoaded())

  function onSoundLoaded() {

  const width = Math.min(window.innerHeight, window.innerWidth)
  const height = width
  const numberOfPoints = width
  const radius = 10

  let analyser
  let radiusScale
  let colorScale
  let displayData

  setupAnalyser()
  setupVisualization()
  setupScale()
  sound.play()

  window.requestAnimationFrame(() => draw())

  function setupAnalyser() {
  analyser = Pz.context.createAnalyser()
  analyser.fftSize = nextPowerOf2(numberOfPoints) * 4
  displayData = new Uint8Array(analyser.frequencyBinCount)

  sound.connect(analyser)
  }

  function setupVisualization() {

  const svg = d3.select('svg')
  .attr('width', width)
  .attr('height', height)

  const points = d3.range(numberOfPoints).map(phyllotaxis(radius))

  svg.append('g').selectAll('circle')
  .data(points)
  .enter()
  .append('circle')
  .attr('cx', d => d.x)
  .attr('cy', d => d.y)
  .attr('r', 1)
  }

  function setupScale() {
  radiusScale = d3.scaleSqrt().domain([0, 255]).range([1, 8])
  colorScale = d3.scaleSqrt().domain([0, 255]).range(['#673ab7', '#e91e63'])
  }

  function draw() {
  analyser.getByteFrequencyData(displayData)
  const lowerCut = 0.15
  const upperCut = 0.1

  let data = displayData.slice(displayData.length * lowerCut, displayData.length - displayData.length * upperCut)

  d3.select('svg > g').selectAll('circle')
  .data(data)
  .attr('r', d => radiusScale(d))
  .attr('fill', d => colorScale(d))

  window.requestAnimationFrame(() => draw())
  }

  function phyllotaxis(radius) {
  const theta = Math.PI * (3 - Math.sqrt(5))

  return i => {
  let r = radius * Math.sqrt(i)
  let a = theta * i
  return {
  x: width / 2 + r * Math.cos(a),
  y: height / 2 + r * Math.sin(a)
  }
  }
  }

  function nextPowerOf2(number) {
  return Math.pow(2, Math.ceil(Math.log(number) / Math.log(2)))
  }
  }
</script>

Как вы можете заметить в коде, у нас указан .mp3 файл.
Код
const path = 'https://alemangui.github.io/audio/piano-electro.mp3' // Прямая ссылка на .mp3 файл


Источник: http://art-ucoz.ru/
Добавлять комментарии могут только зарегистрированные пользователи.