{"id":46841,"date":"2024-07-02T12:37:22","date_gmt":"2024-07-02T12:37:22","guid":{"rendered":"https:\/\/ubuntuhandbook.org\/?p=46841"},"modified":"2024-07-02T12:37:22","modified_gmt":"2024-07-02T12:37:22","slug":"spotify-playback-top-bar-ubuntu","status":"publish","type":"post","link":"https:\/\/ubuntuhandbook.org\/index.php\/2024\/07\/spotify-playback-top-bar-ubuntu\/","title":{"rendered":"Show Spotify Playback Info in Top-bar in Ubuntu 24.04"},"content":{"rendered":"<p><a href=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2024\/04\/spotify-logo.webp\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-thumbnail wp-image-46054\" src=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2024\/04\/spotify-logo-250x250.webp\" alt=\"\" width=\"250\" height=\"250\" srcset=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2024\/04\/spotify-logo-250x250.webp 250w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2024\/04\/spotify-logo-300x300.webp 300w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2024\/04\/spotify-logo-700x700.webp 700w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2024\/04\/spotify-logo-768x768.webp 768w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2024\/04\/spotify-logo.webp 1200w\" sizes=\"auto, (max-width: 250px) 100vw, 250px\" \/><\/a><\/p>\n<p>Spotify users? Here&#8217;s an extension that can display the current track information in Ubuntu top-bar.<\/p>\n<p>It&#8217;s <a href=\"https:\/\/github.com\/esenliyim\/sp-tray\" target=\"_blank\" rel=\"noopener\">spotify-tray<\/a>, a free open-source tool available as GNOME Shell Extension, that can show title, artist, and\/or album of current playing song or podcast in top-panel.<\/p>\n<p>The extension is very simple and customizable. You can control:<\/p>\n<ul>\n<li>Where (<b>left<\/b>, <b>center<\/b>, or <b>right<\/b>) to display the playback info in top-bar.<\/li>\n<li>What to display, including <b>track<\/b>, <b>artist<\/b>, <b>album<\/b>, <b>custom text<\/b>, <b>emoji<\/b> (via built-in selector).<\/li>\n<li>Display in <b>static<\/b> mode, or horizontally <b>scrolling marquee<\/b>.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2024\/07\/spotify-playback-tray.webp\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-46842\" src=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2024\/07\/spotify-playback-tray.webp\" alt=\"\" width=\"538\" height=\"268\" srcset=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2024\/07\/spotify-playback-tray.webp 538w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2024\/07\/spotify-playback-tray-300x149.webp 300w\" sizes=\"auto, (max-width: 538px) 100vw, 538px\" \/><\/a><br \/>\n<!--more--><\/p>\n<p>It uses Spotify&#8217;s exposed dbus interface to fetch metadata rather than the web API, and works with Spotify app installed as <b>Snap<\/b>, <b>Flatpak<\/b>, and <b>Deb<\/b> packages.<\/p>\n<p>So far, the extension supports GNOME version from 3.36 to 46. Meaning it works on <b>Ubuntu 20.04<\/b>, <b>Ubuntu 22.04<\/b>, <b>Ubuntu 24.04<\/b>, and other recent Linux, such as Debian 11\/12, Fedora Workstation, Arch, RHEL 9 with GNOME Desktop.<\/p>\n<h3>Step 1: Install the Spotify-Tray Extension<\/h3>\n<p>For <b>Ubuntu 22.04<\/b>, and <b>Ubuntu 24.04<\/b>, first search for and install &#8220;Extension Manager&#8221; from either Ubuntu Software or App Center.<\/p>\n<div id=\"attachment_44419\" style=\"width: 610px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2023\/09\/extension-manager-inappcenter.webp\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-44419\" class=\"size-large wp-image-44419\" src=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2023\/09\/extension-manager-inappcenter-600x425.webp\" alt=\"\" width=\"600\" height=\"425\" srcset=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2023\/09\/extension-manager-inappcenter-600x425.webp 600w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2023\/09\/extension-manager-inappcenter-300x212.webp 300w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2023\/09\/extension-manager-inappcenter-768x544.webp 768w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2023\/09\/extension-manager-inappcenter.webp 989w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><p id=\"caption-attachment-44419\" class=\"wp-caption-text\">Install Extension Manager in Ubuntu Software\/App Center<\/p><\/div>\n<p>Then, you may use &#8220;Extension Manager&#8221; to search &amp; install <code>spotify tray<\/code> extension under <i>Browse<\/i> tab. For Ubuntu 22.04, switch filter if it does not show you the correct search result.<\/p>\n<p><a href=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2024\/07\/spotify-tray-em.webp\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-46843\" src=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2024\/07\/spotify-tray-em-700x511.webp\" alt=\"\" width=\"610\" height=\"445\" srcset=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2024\/07\/spotify-tray-em-700x511.webp 700w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2024\/07\/spotify-tray-em-300x219.webp 300w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2024\/07\/spotify-tray-em-768x561.webp 768w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2024\/07\/spotify-tray-em.webp 849w\" sizes=\"auto, (max-width: 610px) 100vw, 610px\" \/><\/a><\/p>\n<p>For <b>Ubuntu 20.04<\/b> and other Linux with GNOME, just go to the link page below:<\/p>\n<div class=\"wp-block-buttons aligncenter\">\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link has-vivid-cyan-blue-to-vivid-purple-gradient-background has-text-color has-background\" href=\"https:\/\/extensions.gnome.org\/extension\/4472\/spotify-tray\/\" target=\"_blank\" rel=\"noreferrer noopener\">Spotify-tray in EGO<\/a><\/div>\n<\/div>\n<p>Then use the ON\/OFF toggle to install.<\/p>\n<p>NOTE: You need to install browser extension (if prompted in the page) and refresh. Ubuntu user also need to press <code>Ctrl+Alt+T<\/code> to open terminal and run command to install the agent package:<\/p>\n<pre>sudo apt install chrome-gnome-shell<\/pre>\n<p><a href=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2024\/07\/spotify-tray-web.webp\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-46844\" src=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2024\/07\/spotify-tray-web-700x438.webp\" alt=\"\" width=\"610\" height=\"382\" srcset=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2024\/07\/spotify-tray-web-700x438.webp 700w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2024\/07\/spotify-tray-web-300x188.webp 300w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2024\/07\/spotify-tray-web-768x480.webp 768w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2024\/07\/spotify-tray-web.webp 1147w\" sizes=\"auto, (max-width: 610px) 100vw, 610px\" \/><\/a><\/p>\n<h3>Step 2: Fix for GNOME 46 (Ubuntu 24.04)<\/h3>\n<p>At the moment of writing, the extension has an issue if you installed it on GNOME 46.<\/p>\n<p>It&#8217;s disabled by default with a cross mark in Extension Manager (or GNOME Extensions app) page. By opening its preferences dialog will show you &#8220;<b>Something&#8217;s gone wrong<\/b>&#8221; with following technical details:<\/p>\n<blockquote><p>GLib.FileError: Failed to open file \u201c\/home\/ji\/.local\/share\/gnome-shell\/extensions\/sp-tray@sp-tray.esenliyim.github.com\/prefs.xml\u201d: No such file or directory<\/p>\n<p>Stack trace:<br \/>\ngetPreferencesWidget@file:\/\/\/home\/ji\/.local\/share\/gnome-shell\/extensions\/sp-tray@sp-tray.esenliyim.github.com\/prefs.js:78:17<br \/>\nfillPreferencesWindow@resource:\/\/\/org\/gnome\/Shell\/Extensions\/js\/extensions\/prefs.js:36:29<br \/>\n_loadPrefs@resource:\/\/\/org\/gnome\/Shell\/Extensions\/js\/extensionPrefsDialog.js:41:18<br \/>\nasync*_init@resource:\/\/\/org\/gnome\/Shell\/Extensions\/js\/extensionPrefsDialog.js:26:14<br \/>\n&#8230;<\/p><\/blockquote>\n<p>To fix the issue, simply create the <code>prefs.xml<\/code> file manually under the extension folder, and paste the file content from the Github project page.<\/p>\n<ul>\n<li>First, go to the project file page <a href=\"https:\/\/github.com\/esenliyim\/sp-tray\/blob\/master\/prefs.xml\" target=\"_blank\" rel=\"noopener\">github.com\/esenliyim\/sp-tray\/blob\/master\/prefs.xml<\/a>, press Ctrl+A to select all and copy the file content.<\/li>\n<li>Launch &#8220;Text Editor&#8221; and create an empty file, then paste the content into this file.<br \/>\n<a href=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2024\/07\/copy-prefsxml.webp\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-46845\" src=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2024\/07\/copy-prefsxml-700x404.webp\" alt=\"\" width=\"610\" height=\"352\" srcset=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2024\/07\/copy-prefsxml-700x404.webp 700w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2024\/07\/copy-prefsxml-300x173.webp 300w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2024\/07\/copy-prefsxml-768x444.webp 768w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2024\/07\/copy-prefsxml-1320x763.webp 1320w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2024\/07\/copy-prefsxml.webp 1506w\" sizes=\"auto, (max-width: 610px) 100vw, 610px\" \/><\/a><\/li>\n<li>Finally, press Ctrl+Shift+S in text editor to open &#8220;Save As&#8221; dialog. Then do:\n<ul>\n<li>Set filename <code>prefs.xml<\/code><\/li>\n<li>Save to &#8220;.local\/share\/gnome-shell\/extensions\/extensions\/sp-tray@sp-tray.esenliyim.github.com\/&#8221; directory.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2024\/07\/save-prefs-xml.webp\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-46846\" src=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2024\/07\/save-prefs-xml-700x447.webp\" alt=\"\" width=\"610\" height=\"390\" srcset=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2024\/07\/save-prefs-xml-700x447.webp 700w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2024\/07\/save-prefs-xml-300x191.webp 300w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2024\/07\/save-prefs-xml-768x490.webp 768w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2024\/07\/save-prefs-xml.webp 989w\" sizes=\"auto, (max-width: 610px) 100vw, 610px\" \/><\/a><\/li>\n<\/ul>\n<p>Press Ctrl+H to show\/hide <code>.local<\/code> folder if you don&#8217;t see it. Finally, <b>log out and back in<\/b> to apply changes.<\/p>\n<h3>Step 3: Configure the Extension<\/h3>\n<p>If everything goes well, you can now launch &#8220;Extension Manager&#8221; or &#8220;Gnome Extensions&#8221; (both available in Ubuntu Software or App Center), and click the gear icon to launch the preferences dialog for the extension.<\/p>\n<p>Finally, configure what to display on top-bar, position, display mode, and more.<\/p>\n<p><a href=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2024\/07\/config-sp-tray.webp\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2024\/07\/config-sp-tray-700x483.webp\" alt=\"\" width=\"610\" height=\"421\" class=\"aligncenter size-large wp-image-46847\" srcset=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2024\/07\/config-sp-tray-700x483.webp 700w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2024\/07\/config-sp-tray-300x207.webp 300w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2024\/07\/config-sp-tray-768x530.webp 768w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2024\/07\/config-sp-tray.webp 1095w\" sizes=\"auto, (max-width: 610px) 100vw, 610px\" \/><\/a><\/p>\n<p>When done, launch Spotify and play something to verify. Enjoy!<\/p>","protected":false},"excerpt":{"rendered":"<p>Spotify users? Here&#8217;s an extension that can display the current track information in Ubuntu top-bar. It&#8217;s spotify-tray, a free open-source tool available as GNOME Shell Extension, that can show title, artist, and\/or album of current playing song or podcast in top-panel. The extension is very simple and customizable. You can control: Where (left, center, or [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":46054,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[261],"class_list":["post-46841","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-howtos","tag-spotify"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/ubuntuhandbook.org\/index.php\/wp-json\/wp\/v2\/posts\/46841","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ubuntuhandbook.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ubuntuhandbook.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ubuntuhandbook.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ubuntuhandbook.org\/index.php\/wp-json\/wp\/v2\/comments?post=46841"}],"version-history":[{"count":0,"href":"https:\/\/ubuntuhandbook.org\/index.php\/wp-json\/wp\/v2\/posts\/46841\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ubuntuhandbook.org\/index.php\/wp-json\/wp\/v2\/media\/46054"}],"wp:attachment":[{"href":"https:\/\/ubuntuhandbook.org\/index.php\/wp-json\/wp\/v2\/media?parent=46841"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ubuntuhandbook.org\/index.php\/wp-json\/wp\/v2\/categories?post=46841"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ubuntuhandbook.org\/index.php\/wp-json\/wp\/v2\/tags?post=46841"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}