Уважаемые друзья и пользователи сайта ART-UCOZ!
Уведомляем вас о том, что мы приняли трудное, но обдуманное решение о закрытии проекта в качестве Интернет-магазина ART-UCOZ. С 05.11.2022 года сайт ART-UCOZ.RU продолжит работать в качестве каталога файлов, статей и информации. Будет закрыт только раздел интернет-магазина!
Все товары были перенесены в наш новый проект SHOPTHEMES - Vendor Marketplace (https://shopthemes.ru), над которым мы долго работали и продолжаем улучшать его в настоящее время.
Вас ждут: личный кабинет, возможность пополнения баланса на любую сумму, зачисление бонусов за посещение, перевод средств между пользователями, вывод средств (для продавцов), личный чат, больше новых цифровых товаров и многое другое.
Уведомляем вас о том, что мы приняли трудное, но обдуманное решение о закрытии проекта в качестве Интернет-магазина ART-UCOZ. С 05.11.2022 года сайт ART-UCOZ.RU продолжит работать в качестве каталога файлов, статей и информации. Будет закрыт только раздел интернет-магазина!
Все товары были перенесены в наш новый проект SHOPTHEMES - Vendor Marketplace (https://shopthemes.ru), над которым мы долго работали и продолжаем улучшать его в настоящее время.
Вас ждут: личный кабинет, возможность пополнения баланса на любую сумму, зачисление бонусов за посещение, перевод средств между пользователями, вывод средств (для продавцов), личный чат, больше новых цифровых товаров и многое другое.
Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!
Подобные просьбы и вопросы - будут игнорироваться!
Музыкальное сопровождение с использованием SVG
Дата добавления: 07.03.2017 - 13:36
Категория: Хаки / Дополнения, Плееры / Слайдеры
Добавил: Buger
Количество просмотров: 1.7k
Количество комментариев: 0
Размер файла: 3.5 Kb
Рейтинг материала: 5.0 / 1
БЕСПЛАТНО
рейтинг
5.0
/
голосов
1
Интересная реализация для ваших проектов, которая задает музыкальное сопровождение MP3 файлов конкретно под ваш указанный музыкальный файл. Считаю, что применение найдется для него к таким либо вашим проектам. Такое решение встретишь не так часто, по этому выкладываю данный материал. Может кому пригодится.
Как обычно, демонстрация доступна в скачанном файле.
И так, приступим.
Для начала зададим HTML элемента
Пропишем стили:
Ну а теперь делаем самое основное.
Подключаем необходимые библиотеки. Подключать будем напрямую из CDN :
А вот и сам обработчик
Как вы можете заметить в коде, у нас указан .mp3 файл.
Источник: http://art-ucoz.ru/
Как обычно, демонстрация доступна в скачанном файле.
И так, приступим.
Для начала зададим HTML элемента
Код
<svg></svg>
Пропишем стили:
Код
<style class="cp-pen-styles">
svg {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
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 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>
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/
Добавлять комментарии могут только зарегистрированные пользователи.
Поделись с друзьями: