Wallpaper Engine

Wallpaper Engine

95 ratings
Wallpaper Music! ♡ Custom Music & Images Tutorial
By Cube
This is a customizable wallpaper, based on my previous work Bocchi the Rock! ぼっち・ざ・ろっく!(Album).
This is a reworked version that users can add their own music, images, and custom colors for their own design to have a custom feel to their wallpaper.

This guide will provide you with the details that will help you have an idea of how to add your custom files and how to back up the data so that if ever you run into an error there would be saved data that you can easily put in the wallpaper.

Video Tutorial:
https://www.youtube.com/watch?v=i_D8PWsUVss

   
Award
Favorite
Favorited
Unfavorite
#1 Enable CEF devtools
Description
You'll need to enable CEF dev tools on wallpaper engine so you can input in the textbox for your custom image and song names. Wallpaper engine does not allow users to input from the actual wallpaper so we have to do it in the browser through the CEF dev tools.
1.) Open up the wallpaper engine and go to the settings.

2.) After going to the settings bar, navigate to general and scroll down until you see CEF dev tools port.

3.) Once you see CEF dev tools, you can write any four-digit number except for (3000, 8000, 9000) because these might interfere if you run local servers on your pc.

4.) After choosing the four-digit port needed you can click ok and restart wallpaper engine just to be safe.

Chinese Translation Provided by 霜天晓角.
  • 点击wallpaper中的 设置 按钮,选中“ 常规 ”选项卡,拉至最后,在“ CEF开发工具端口 ”填入“ 8080 ”; (也可以选择其他端口,选择8080的原因只是因为wallpaper给的官方文档写的例子)
  • 打开Chrome或Edge浏览器,键入网址“ localhost:8080 ”;
  • 在左边分别输入曲目名称(如上文举的"ABC")、歌曲类型(如"flac")、图片类型(如"jpg")、背景颜色(如"#FFFFFF")、前景颜色(如"#000000")、类别(如"Anime"),点击" submit "
  • 恭喜你!你可以在右边看到添加的曲目啦!:steamthumbsup:
由于没有办法翻墙去Reddit和Youtube,于是简单探索了一下,这里贴一下我是怎么自定义曲目的。
  • 打开所在项目的文件夹,这里可以通过在wallpaper选中壁纸,右键选择“ 在文件资源管理器中打开 ”;
  • 进入 assets 文件夹下的 image 文件夹,将 专辑图片 复制进去;
  • 进入 assets 文件夹下的 songs 文件夹,将 歌曲 复制进去; (这里需要注意,图片名字和歌曲名字一致,例如我自定义一首歌曲《ABC》,那么我的专辑图片命名为“ABC.jpg”,我的歌曲命名为"ABC.flac")
#2 Add your custom songs and images directly in to the wallpaper directory.
Make sure that the pair of images and songs that you will add to the wallpaper is exactly the same!

Different filenames of pairs will result in the wallpaper not finding the file that has a different name to the one that you have input.

***Warning***
Make sure to identify the remember the file types for each song and image that you add to the wallpaper because it may not play or display if the file is not found. Don't remove the songs and images names Guitar, Loneliness, and Blue Planet, If I could be a constellation, and That band to prevent an empty playlist that may result in a black screen.

Steps
1.) Hover the wallpaper then right-click, then click on the Open in Explorer.

2.) An windows explorer will appear and show where the folder for the wallpaper is stored.

3.) Open the assets folder, you will see songs and images which is where you will add the files that you want.
#3 Input the values for you wallpaper.
[h1Most Important step, make sure that the values that you have entered are correct!][/h1]

Sample Structure of the input:
{
"id": 4,
"default": false,
"type": "mp3",
"imageType": "jfif",
"name": "After LIKE",
"background": "#000000",
"foreground": "#00FF01",
"category": "K-Pop"
}

Steps
1.) Input the needed values. Missing a text box will prevent you from adding it and will result to an error.

Song name : Name of the image and song. Must be exactly the same!
Song type: Type of music that will be used. YOU DON'T NEED TO PUT A "." in front of the name.
Image Type: Type of Image that will be used. YOU DON'T NEED TO PUT A "." in front of the name.
Background Color: This will use a hex code which is a 6-digit that will represent the color that will be used in the wallpaper.
Foreground Color: This will use a hex code which is a 6-digit that will represent the color and will be used for the text shadows and border colors.
Category: This part will be updated in the future so please do remember the things that you have input.

Sample Input:
Song name: Moonlight Sunrise
Song Type: mp3
Image Type: webp
Background: #4D2B39
Foreground: #AE5372
Category: K-Pop

2.) After putting in the needed variables you can the click submit and it will automatically appear if what you have input is correct.

3.) Enjoy!!!!!!

You can remove the song by clicking it once it is playing you can then click "remove song" and this will automatically remove the current playing song.
Note:
Once you remove the song it will be removed and can't be undone with any hotkeys.




TIPS and How to back up playlist.
The entire playlist is stored in the local storage of your browser, so your presets and playlist are not reset at every start of your computer.

How to save playlist/presets
1.) Go to the CEF dev tools then click on the right side and then application, find the text that says LocalStorage then after expanding it click on "file://" which will show every LocalStorage saved in the port but you will only need to find the key that is named "music-player-03" where the songs and the presets are saved.

2.) Double-click on the value, then copy it into a notepad or any writing tool to save. You can also replace the value with previous saves.

The benefit of doing this is that if ever the wallpaper fails and resets itself you have a back up of the songs that have already been saved and prevent you from writing all of it again.

SAMPLE JSON FOR THE LOCALSTORAGE

{
"songs": [
{
"id": 0,
"default": true,
"type": "flac",
"imageType": "jpg",
"name": "Guitar, Loneliness and Blue Planet",
"background": "#4C2633",
"foreground": "#ED709A",
"category": "Anime"
},
{
"id": 1,
"default": true,
"type": "flac",
"imageType": "jpg",
"name": "That band",
"background": "#0C3958",
"foreground": "#1A7CC3",
"category": "Anime"
},
{
"id": 2,
"default": true,
"type": "flac",
"imageType": "jpg",
"name": "If I could be a constellation",
"background": "#580D24",
"foreground": "#E81A5B",
"category": "Anime"
},
{
"id": 4,
"default": false,
"type": "mp3",
"imageType": "jfif",
"name": "After LIKE",
"background": "#000000",
"foreground": "#00FF01",
"category": "K-Pop"
},
{
"id": 5,
"default": false,
"type": "mp3",
"imageType": "webp",
"name": "Moonlight Sunrise",
"background": "#4D2B39",
"foreground": "#AE5372",
"category": "K-Pop"
},
{
"id": 5,
"default": false,
"type": "mp3",
"imageType": "PNG",
"name": "OMG",
"background": "#000000",
"foreground": "#FFFFFF",
"category": "K-Pop"
},
{
"id": 7,
"default": false,
"type": "mp3",
"imageType": "jpg",
"name": "Summertime",
"background": "#26364D",
"foreground": "#FFCCEF",
"category": "J-Pop"
},
{
"id": 7,
"default": false,
"type": "mp3",
"imageType": "jpg",
"name": "Stay With Me",
"background": "#233A40",
"foreground": "#3C6B7B",
"category": "J-Pop"
},
{
"id": 8,
"default": false,
"type": "mp3",
"imageType": "jfif",
"name": "With The Star (with OOHYO)",
"background": "#0D3A59",
"foreground": "#024A92",
"category": "J-Pop"
},
{
"id": 9,
"default": false,
"type": "mp3",
"imageType": "jfif",
"name": "oddloop",
"background": "#1B3A4C",
"foreground": "#A8E7E3",
"category": "J-Pop"
},
{
"id": 10,
"default": false,
"type": "mp3",
"imageType": "jpg",
"name": "Say it",
"background": "#0C3958",
"foreground": "#1A7CC3",
"category": "J-Pop"
},
{
"id": 12,
"default": false,
"type": "mp3",
"imageType": "jpg",
"name": "I Really Want to Stay at Your House",
"background": "#0D1850",
"foreground": "#EAACEB",
"category": "J-Pop"
},
{
"id": 12,
"default": false,
"type": "mp3",
"imageType": "jpg",
"name": "Just The Two Of Us",
"background": "#59420E",
"foreground": "#F6B31A",
"category": "J-Pop"
}
],
"presets": [
{ "playlist": true },
{ "player": true },
{ "register": true },
{ "visualizer": true },
{ "clock": true }
],
"category": ["Anime"]
}
30 Comments
Cube  [author] 25 Sep, 2024 @ 6:59pm 
@just one smoke pls
Could you check your audio settings and the audio file to double-check if it meets the requirement?
Also, I created a new version of this, where you can publish your own.
https://wallpaper-player-creator.vercel.app/
just one smoke pls 24 Sep, 2024 @ 5:13am 
Why does the player turn black when I load a song? (The UI is all normal but there is no sound, and the progress bar does not move)
Cube  [author] 9 Apr, 2024 @ 6:19pm 
@Noirbe
https://wallpaper-player-creator.vercel.app/
This is still in beta, it allows you to create your own custom wallpaper and upload it as your own work. LMK your experience with it.
Noirbe 9 Apr, 2024 @ 4:14pm 
I can't type in the boxes on the wallpaper itself, is this only able to be done through the json files?
耄耋 5 Nov, 2023 @ 8:59am 
how to setting the category options?
QAQ 15 Sep, 2023 @ 11:30pm 
Is there any way to connect this template to spotify music?
XfarisGamerX 13 Aug, 2023 @ 8:46pm 
add a 12hours settings because not everyone uses 24 hours
Cube  [author] 13 Aug, 2023 @ 12:58am 
@Nom
Wallpaper Engine from what I know does not allow keyboard input for security reasons. :happymiya:
Nom 12 Aug, 2023 @ 12:25pm 
i loooove this it works so well for me... i was wondering, are there any hotkeys/shortcuts that can be used to pause and skip songs?
T.M.K.I.A 14 Jul, 2023 @ 1:54am 
learn a lot, thanks a lot!