Opera and Spotify team up on new Sonic Theme for Opera One
Opera has added a new way for users to enjoy music inside its desktop browser, introducing a theme that reacts to whatever's playing through the built in Music Player. The feature was made in conjunction with Spotify and turns the browser’s Start page into an animated display that moves in sync with streaming audio.
The Sonic Theme is available in Opera One and uses shader based effects to create a pattern that moves with the playing track. The theme is intended to resemble sound waves passing through a thin layer of sand. When music starts, the animation breaks into small particles that move across the screen in real time.
Opera says the new addition builds on the habits it already sees among its users. Mohamed Salah Mourad, Senior Director of Product at Opera, explains, “People love listening to music while browsing, and Opera is still the only major web browser with a built in Music Player that makes for a truly great experience. Now we are taking it one step further with a visual theme of the browser reacting to your music.”
Sonic works in dark mode and users can adjust its color scheme to match their tastes. The animation can shift from bright colors for upbeat tracks to more restrained tones for slower tunes. The theme only appears on the Start page so you don't need to worry about the browser consuming extra resources during use.
To enable the theme, just pick Sonic from the theme gallery. The animated background will appear on the Start page and link to the Music Player located in the sidebar. Once the music begins, the theme activates automatically.
Beyond the Spotify sidebar integration, the Music Player can be detached and moved anywhere on the screen so that you can control playback without switching tabs.
Salah said, “The Sonic theme is our third major improvement to Opera One to make a better music streaming experience. With the sidebar integration of popular music services, a floating music Music Player, and now a visual theme, we believe we have truly elevated what the music streaming experience could be like in Opera.”
Opera One already supports Dynamic Themes that use shader technology to color and animate the background of the browser. Sonic extends that technique further by capturing audio from the sidebar and converting it into a power spectrum texture -- one axis of the texture represents frequency and the other represents time.
The browser passes this texture to the shader. Each pixel uses its current position and animation coordinates to sample audio intensity and the shader applies a frequency compensation curve to balance the output and uses the amplitude values to drive color and movement in sync with the music. Watch it in action in the video below.
You can download Opera One here. Some Opera users will have access to a time limited Premium offer from Spotify, although this varies by country.
What do you think about Sonic and its music reactive design Let us know in the comments.