Как сделать эквалайзер в wallpaper engine

F.A.Q по Wallpaper Engine — как установить и настроить программу, как сделать свои живые обои для рабочего стола

Wallpaper Engine — это популярное программное обеспечение, которое позволяет создать и установить анимированное изображение или видеофайл вместо обыденных обоев на рабочий стол. В этом руководстве мы ответим на самые распространенные вопросы по использованию этой программы.

Как установить Wallpaper Engine

Для установки программы Wallpaper Engine вам сперва необходимо приобрести её в одном из цифровых магазинов. Например, вы можете воспользоваться Steam-версией программного обеспечения. После покупки просто выполните стандартную процедуру установки Wallpaper Engine.

Как настроить Wallpaper Engine

После приобретения и установки Wallpaper Engine в лаунчере выберите «Запустить». Перед вами появится окно с просьбой уточнить тип запуска:

1. Запустить Wallpaper Engine
2. Запустить Wallpaper Engine 64-bit (May use more RAM)
3. Запустить Wallpaper Engine 32-bit (disable UI hardware acceleration)
4. Запустить Scan for conflicting applications

Советы по типу запуска Wallpaper Engine:

• При наличии ПК средней сборки с небольшим объемом оперативной памяти (ОЗУ) выбирайте первый пункт (Запустить Wallpaper Engine).
• Если у вас мощный ПК с хорошим процессором и большим объемом оперативной памяти, то мы рекомендуем выбрать второй пункт «Запустить Wallpaper Engine 64-bit».
• Третий тип запуска предназначен для слабых ПК с малым объемом оперативной памяти и слабым процессором.
• Используйте последний тип запуска, чтобы сканировать наличие конфликтующих приложений с программой Wallpaper Engine.

После запуска программы, откройте меню «Настройки» и выполните предустановки качества для обработки изображений. Если в процессе обработки и создания обоев Wallpaper Engine начинает тормозить или выдает ошибки, попробуйте снизить качество производительности в этом меню. В первую очередь рекомендуем обратить внимание на «Полноэкранное сглаживание». При сильных зависаниях попробуйте снизить этот параметр с «MSAA x8» на «MSAA x4» и так далее до полного отключения этой функции.

В настройках воспроизведения обоев определитесь со следующими параметрами:

• «Другое приложение выбрано». Этот параметр определяет функциональность живых обоев во время открытия проводника или другого приложения. Если установить «Пауза», то во время активности любого окна обои прекратят анимацию.
• «Другое приложение развернуто / полный экран». Параметр, который позволяет прекратить анимацию обоев при запуске любого полноэкранного приложения. Для этого выберите функцию «Пауза».
• «Другое приложение воспроизводит аудио». Если установленные обои имеют аудиодорожку, то мы рекомендуем выставить параметр «Пауза». В противном случае установите «Продолжать работу».

Совет: для автоматического запуска живых обоев в настройках программы перейдите во вкладку «Общее» и поставьте галочку напротив параметра «Запускать с Windows».

Как сделать свои обои

В программе Wallpaper Engine выберите пункт «Создать обои» в правом нижнем углу экрана и выберите собственную подходящую картинку. После загрузки изображения в программу дайте ему любое название и нажмите «ОК». Чтобы анимировать загруженное изображение в левом нижнем углу кликните «Добавить предустановку» и выберите один или несколько эффектов.

Также вы можете изменить скорость, размер анимации, добавить тряску и другие спецэффекты в меню «Параметры». Для сохранения готовых обоев выберите вкладку «Steam» — «Подготовить к публикации». Обязательно установите возрастной рейтинг, если на изображении присутствует нежелательный контент или контент для взрослых.

Как добавить музыку

Начнем с того, что добавить музыку можно не только в свой проект, но и в проект другого пользователя, который разрешил возможность воспроизведения треков. В случае, когда обои имеют такую функцию, то просто замените трек в мастерской редактора Wallpaper Engine. Для этого выберите готовое изображение и кликните на кнопку «Добавить» или «Добавить предустановку» (зависит от версии программы) в левом нижнем углу. Помимо различных эффектов в открывшемся окне вы можете выбрать вкладку «Sound» и загрузить собственную звуковую дорожку.

В некоторых случаях готовые живые обои представляют собой видеофайл с расширением «mp4». В этом случае для редактирования вам нужно воспользоваться специальным программным обеспечением, таким как Sony Vegas Pro или Adobe Premiere Pro.

Как поставить на экран блокировки

Живые обои на рабочем столе выглядят очень эффектно и современно. Но многие пользователи задаются вопросом, можно ли установить подобную функцию на экран блокировки Windows. К сожалению это невозможно по причине внутренней защиты операционной системы Windows, которая запрещает сторонним программам менять изображение на экране блокировки. Как заверяют разработчики Wallpaper Engine, в дальнейшем эта функция также будет недоступна.

Как добавить эквалайзер

Собственноручно создать работающий графический эквалайзер в Wallpaper Engine довольно проблематично. Но в сети есть довольно много уже готовых и самое главное рабочих тем с эквалайзером. Вот один из примеров в мастерской цифрового магазина Steam.

Где хранятся (лежат, сохраняются) скачанные обои

Самостоятельно созданные и скачанные обои других пользователей можно найти в библиотеке файлов Steam на вашем накопителе:

• «Program Files (x86)\Steam\steamapps\workshop\content\431960»

Как удалить Wallpaper Engine

Если ваше программное обеспечение приобретено в одном из официальных цифровых магазинов, то воспользуйтесь соответствующим лаунчером для его удаления. Столкнувшись с проблемой удаления Steam-версии Wallpaper Engine, выполните следующие действия:

Как добавить звук в Wallpaper Engine

Wallpaper Engine – это удобное приложение, которое можно использовать для создания собственных анимированных и интерактивных обоев для рабочего стола Windows. Одной из функций, которые может предложить эта программа, является возможность добавлять звук к обоям по вашему выбору. Весь этот процесс займет у вас менее 10 минут.

В этой статье мы покажем вам, как чтобы добавить звук к обоям с помощью Wallpaper Engine.

Как добавить звук в Wallpaper Engine

Wallpaper Engine позволяет использовать живые обои на рабочем столе Windows. Вы можете анимировать свои собственные изображения или выбрать обои из библиотеки программы. Можно даже добавить звук к изображению и использовать его в качестве обоев рабочего стола.

Этот инструмент также называется визуализатором звука. Это расширенная функция, поэтому для ее настройки может потребоваться немного усилий. Чтобы упростить вам задачу, мы разделили процесс на четыре части. Вам также потребуется использовать сторонний веб-сайт, но мы вернемся к этому позже.

После установки Wallpaper Engine он будет автоматически закреплен на панели задач. Вот что вам нужно сделать, чтобы запустить его.

1. Щелкните правой кнопкой мыши значок Wallpaper Engine в правом нижнем углу окна screen.
   
2. Выберите “Изменить обои” из меню.
   
3. Щелкните значок “Установлено” вкладку в окне Wallpaper Engine.
   
4. Найдите обои, которые хотите добавить звук в.
   
5. Нажмите правой кнопкой мыши на обои и выберите &ldquo ;Открыть в проводнике”
   
6. Скопируйте расположение файла в проводнике.
   

Это был первый часть процесса установки аудиовизуализатора. Не выключайте окно Wallpaper Engine. Следующим шагом является распаковка “scene.pkg” файл, который находится в нижней части Проводника. Это то, что вы собираетесь сделать.

1. Откройте эту ссылку. Это сторонний веб-сайт, который мы будем использовать для распаковки заархивированного файла.
   
2. Нажмите кнопку “Выбрать файл” в левом верхнем углу.
   
3. Вставьте расположение “scene.pkg” файл в папку.
   
4. Перейдите к “Загрузить” вариант.
   

На этом веб-сайте будет распакован файл сцены, который вам понадобится для добавления звук в Wallpaper Engine.

Теперь пришло время вернуться к окну Wallpaper Engine. Убедитесь, что обои, которые вы хотите использовать, все еще выбраны. Это то, что вы должны сделать дальше.

1. Перейдите в “Редактор обоев” значок в левом нижнем углу.
   
2. Нажмите кнопку “Использовать шаблон” в новом окне.
   
3. Введите имя нового проект.
   
4. Выберите шаблон. Возможные варианты: “2D-сцена” «3D-сцена» «Купол» “Флаг” и “Анимированный GIF”
   
5. Нажмите “ ОК” кнопку.
   
6. Перейдите к “Редактировать” в левом верхнем углу нового окна.
   
7. Продолжить “Открыть в проводнике” снова.
   

Этот следующий шаг может показаться немного сложным, но в основном вам нужно удалить все файлы из папки File Explorer. Это будут новые файлы из только что созданного вами проекта. Суть в том, чтобы заменить их оригинальными файлами. Это делается путем извлечения “Scene.zip” папку, которую вы загрузили из этого стороннего приложения. Как только вы это сделаете, скопируйте извлеченные файлы и вставьте их в новую папку проекта.

Наконец-то мы подошли к последней части процесса аудио визуализатора. Когда вы вернетесь в приложение Wallpaper Engine, вы увидите две копии одних и тех же обоев. Выполните следующие действия, чтобы завершить процесс.

1. Нажмите на один из обоев.
2. Перейдите к “Открыть в редакторе” на правой панели.
   
3. Перейдите к “Добавить актив” в верхнем левом углу редактора.
   
4. Выберите &ldquo ;Звук” из списка параметров, а затем кнопку “OK” кнопку.
   
5. Найдите звук, который хотите использовать на своем компьютере.
   
6. Нажмите “Открыть”
   
7. Выберите “Файл” вкладку в редакторе.
   
8. Выберите “Сохранить проект&rdquo. ;
   

Теперь, когда вы добавили звук на обои, вы можете при желании отредактировать его. Например, вы можете настроить громкость, выравнивание обоев, скорость воспроизведения и его положение. Когда вы закончите редактирование обоев, нажмите «ОК». Обои будут немедленно добавлены на ваш рабочий стол, и вы также должны услышать звук.

Стать профессионалом в области создания обоев

Инструмент аудиовизуализации кажется сложным в использовании, но как только вы выясните, как это делается в первый раз, в следующий раз это займет у вас вдвое меньше времени. Вы сможете менять обои и музыку к ним, когда захотите.

Вы когда-нибудь пытались добавить звук к обоям с помощью Wallpaper Engine? Вы использовали тот же метод из этого руководства или нашли альтернативный способ? Дайте нам знать в разделе комментариев ниже.

Custom Audio Visualizer Guide

Hey guys! First and foremost, I'm extremely new to the community so if there is a better way to post/share something like this, please let me know!

Anyway, getting into things. A couple days ago I shared my Tampa Bay wallpaper with you guys and it seemed like you guys enjoyed it! A couple comments and a few PMs inquiring about how it was done made me think I should post how I did it so you guys can do it too! Yay inclusion!

First and foremost

You will need (obviously) Wallpaper Engine on Steam. If for some reason you don't have it and browse this sub anyway, this is what you'll need.Once you've got that part sorted out, you're going to want to get this base wallpaper courtesy of the very talented Arthesian.

**Now it gets fun!**

Should probably start with a base image. I used this picture of the Tampa Bay Buccaneers logo, but literally anything will work. Try a use a photo with a dominant color/palette (red, in this case) as it will make it more coherent when its done. The higher resolution the better, since we're going to be adding the big peepee bass shake to the image and it will distort if the resolution isn't high enough. 1920x1080p is recommend, the higher the better.

Once you have your picture downloaded/chosen, boot up the ol' Wallpaper Engine and pick our Customizable Rainbow Visualizer Lines. Once there, we're gonna drop into the trusty Properties menu and get to clickin'.

The first thing we want to do is (obviously) enable Audio Recording, this is what allows the visualizer to function.Secondly, change the Background Type to "Image" instead of "Color," choose your image, then click "Show Extra Settings"

Now, this part is going to be just as much up to your own taste as anything so feel free to change some values here. I'm going to list all the settings and the values I have/used for the Tampa Bay wallpaper.

Bounce on Bass: ON

Bounce Strength: 200%

Rocking (wobble): ON

Rocking Strength: 100%

Rocking Speed: 20%

Blur on Beat: ON

Blur Strength: 103%

Highlight Background on Beat: ON

Highlight Strength: 63%

Color Type: Solid Color

Visualizer Color: Varies

Line Caps Type: Round

Number of Bars: 173

Bar Width: 5

Enable Idle Animation: OFF

Gap Size: 11

Strength: 304

Vertical Growth Offset/Vertical Placement Offset/Horizontal Placement Offset: Unchanged

# Audio Visualization

Wallpaper Engine allows you to process audio volume levels for the left and right audio channel and use that to visualize audio that is being played on the user’s system. Each channel splits the audio frequencies into 64 parts. Each part represents a frequency range for the audio: Low frequencies represent bass while high frequencies represent treble sound ranges.

Utilizing these volume levels allows you to build various types of audio visualization, from full-on bar audio visualizers, to making certain elements on your wallpaper react to the beat of music (by only looking at low frequency ranges, as they usually represent the beat of audio being played).

# Creating an audio listener

In order to get started with an audio visualizer, you have to register a listener function in JavaScript that will supply the audio volume levels to you. Wallpaper Engine provides the window.wallpaperRegisterAudioListener function for this purpose, it expects a callback function that you also need to create.

You should call the wallpaperRegisterAudioListener function once. Please note: Don’t register the audio listener within the window.onload event (or any similar events), this is unreliable and can lead to Wallpaper Engine missing certain events. When in doubt, call this function at the end of your body tag.

In the example below, we’re also creating an empty wallpaperAudioListener(audioArray) function that is handed as a callback parameter to the wallpaperRegisterAudioListener . The function will later contain your custom logic for the audio handling. The name for that function is up to you, but it must have parameter that takes the audio volume levels as an array.

The wallpaperAudioListener function will now be called when new audio samples arrive, which occurs roughly 30 times per second.

# Processing the audio samples

The actual audio data is included in the audioArray that we have created as a parameter to our wallpaperAudioListener function above. This array has a fixed length of 128.

Array elements 0 until 63 contain volume levels for the left channel. Array elements 64 until 127 contain the volume levels for the right channel.

The lower array elements for each channel represent bass frequencies, so at array index 0, you will find the lowest bass sounds for the left channel and at array element 64, you will find the bass sounds for the right audio channel. The higher up you go in the array, the higher the audio frequencies will get, so array indices closest to 64 will contain treble audio volume levels for the left channel and array indices closest to array index 127 will contain the treble audio volume levels for the right channel.

Each array will generally contain a floating point value from 0.00 to 1.00. 0.00 means that the specific frequency is currently not playing any sound and 1.00 means that the frequency is playing at its maximum volume. However, due to the technical implementation, it can be that in very few cases, the numbers may be much greater than 1.0 For this reason, we recommend limiting the volume values to 1.00 with the help of Math.min() . See the sample project below for a concrete example.

# Audio visualization example

In the following example, we are providing a very basic full implementation of the audio visualizer previewed above. You can easily copy-paste this into an empty .html file, import it into Wallpaper Engine and it should work straight away. We don’t recommend placing all scripts, styles and HTML content into one file normally, however, for the sake of this tutorial, it’s easiest to see it all in one place.

The HTML and JavaScript example above contains detailed comments that should help you understand it. Let’s have a closer look at some of the details, though:

# Normalizing the browser styles

First, the CSS rules in the <style> block allow the canvas to fit on any resolution and any aspect ratio. You should always make sure that your wallpaper works on any type of screen resolution and aspect ratio, it’s bad practice to only consider one resolution in your work and it usually only takes a few minor tweaks to ensure it works fine for all users.

In this example, we’re resetting the default margin and padding on the body to 0 and hide any overflow (which shouldn’t be necessary but it can be a good way to prevent scroll bars appearing in some edge cases). Next up, we set the canvas to be equal to the full width and height of the user’s viewport.

# JavaScript-based normalization and initialization

For our JavaScript code, it’s important that we avoid the window.onload function and any similar window events, at least when it comes to the Wallpaper Engine specific code as it can lead to issues with the event system. Since we avoid the onload event call, it’s very important that our JavaScript code is loaded after the HTML body has been rendered already, since our JavaScript directly accesses our canvas. Placing JavaScript at the inside-end of the body tag is perfectly valid, so we recommend this approach.

If you have never worked with canvas elements, it’s important to know that they use an internal resolution for rendering and a secondary resolution for its size in HTML / CSS, so it’s best to specifically set the canvas height and width to the window height and width with JavaScript, which we’re doing in the following two lines of our JavaScript code:

At the very end of our JavaScript code sample, we call the wallpaperRegisterAudioListener function which causes the wallpaperAudioListener to be executed whenever new audio data comes in. As noted above, it’s important that this call is not placed inside any window events such as window.onload , you should structure your HTML so that your JavaScript is loaded last and does not depend on window events.

The function will draw the left audio channel in red and the right audio channel in blue (in reverse order for aesthetical purpose only). The key part of the code can be found here:

The height of the audio bars is determined by the volume level of the frequency that is currently being iterated over in the for loop. Let’s assume the user has a 1920×1080 screen resolution. If the height of the window is 1080 and the volume level for the current frequency (stored in audioArray[i] ) is 0.50, the bar for this specific frequency will be drawn with a height of 540 pixels (1080 * 0.50). This logic is repeated for all audio frequencies, each time Wallpaper Engine supplies a new set of audio data.

You may have noticed that we have also wrapped the audioArray[i] into Math.min(audioArray[i], 1); . This is to ensure the audio levels are limited to 1.00 at their peak. Most values will never go above 1.00, but due to the nature of the implementation, in rare cases this might spike above 1.0 which can cause your wallpaper to render incorrectly.

Of course this is a very basic example and you can change the type of visualization drastically, as you can create much more than just simple audio bars with this type of data. You can also try and add some interpolation between each calls to the wallpaperAudioListener function to smoothen the audio bar movement and make it less erratic, but in these cases you should consider adding an FPS limit to your wallpaper.

# Audio Visualizer Problem Solving

To conserve performance, Wallpaper Engine will not send audio data to your wallpaper unless you actually load a wallpaperAudioListener in the code of your wallpaper. Wallpaper Engine will add the following line to the auto-generated project.json once it detects a properly registered audio listener in the editor preview:

This should happen automatically after you import a JavaScript file that is loaded within your main HTML file, however, if you are editing your files on the go, you may need to specifically use the Save functionality in the editor to force Wallpaper Engine to update your project.json .

As a last resort, you can also manually add that line to the project.json , though if your code is set up properly, this should not be necessary. You can access the project.json by clicking on Edit at the top of the editor and then selecting Open in Explorer to view your project files.

If you continue to have issues with your visualizers, we recommend setting up a debugger connection for Wallpaper Engine as outlined in the following tutorial, this way you can debug the JavaScript code more effectively and check the incoming audio levels you receive: