Sonos App Mac Desktop

Sonos Desktop App Mac
Sonos App Osx
Sonos Desktop Controller App For Mac Or Pc

Control it all with the app. Easily manage your system from any room. Browse music, radio, podcasts, and audiobooks, adjust the volume, group speakers to play in sync. Download the Sonos app for iOS, Android, FireOS, Windows, and macOS.

Digital Asset Guideline Overview

This page is no longer updated.

See Add images on the Sonos developer portal for the latest documentation.

The following digital assets can be offered by your music service:

Album art - Guidelines & Tutorial
Custom browse icons - Guidelines | Tutorial | Templates | Legacy Templates
Ratings icons - Guidelines | Tutorial| SVG Template | Legacy Templates
Service logos - Guidelines | Tutorial | Templates | Legacy Templates

There are two basic types of artwork: line art and photographs. Line art is easily scalable by Sonos apps and should be delivered in SVG Basic 1.1 format. Photographs need to be delivered in specific sizes and in JPG or PNG format, with a density of 72 DPI. See below for details.

Artwork appears in many different sizes on apps. Sonos scales artwork by taking the largest size above what is required by the app and downsampling it.

Use the presentation map to present these digital assets on Sonos apps. See the tutorials above and SMAPI Presentation Maps for details.

Version 5 of the Sonos app introduced a redesign that can use the high resolution displays of iOS and Android devices. We recommend using SVG format to take full advantage of these displays. This also ensures that images continue to have acceptible resolutions when scaled.

The Windows and MacOS apps, and discontinued Sonos hardware controllers (such as the Sonos CONTROL/CR200) are considered legacy controllers. These controllers still use images in PNG format. Therefore, you must submit your logos in PNG format as well.

The table below lists the supported Sonos apps and image formats. Click a link in the product column to read the product documentation.

Sonos Apps	Description	Product
WDCR	Windows desktop app (legacy user interface)	PNG
MDCR	Mac OS desktop app (legacy user interface)	PNG
ICR	iOS app	SVG
ACR ACR-HDPI	Android app for tablets and phones	SVG
CR200	Custom Sonos controller (legacy user interface)	PNG

Photographs need to be delivered in specific sizes, in JPG or PNG format, and with a density of 72 DPI. Files that specify a different DPI setting may not display correctly in every Sonos app. You can save files at 72 DPI by using the Save for Web option in Photoshop (File > Save for Web...).

It is important that you save Scalable Vector Graphic (SVG) images in the SVG Basic 1.1 profile. See the W3C recommendation for further details about this SVG profile. Also, do not use SVG <text> and <mask> elements or hidden layers in your line art because they can cause display problems in the Sonos app.

Validate your SVG using the W3C Markup Validation service. Be sure that the 'Document Type' is specifically set to SVG 1.1 Basic:

Your logos must pass validation before you submit your service for certification by Sonos.

Using Adobe Illustrator

Follow the steps below to save an SVG 1.1 Basic image using Adobe Illustrator (see Adobe Illustrator help for more):

Choose File > Save As or File > Save A Copy.
Enter a filename and choose a location for the file.
Choose SVG (*.SVG) as the file format and click Save. This brings up the SVG Options dialog:
In the SVG Options dialog, choose SVG Basic 1.1 as the SVG Profile.
In the Image Location field, choose Embed.
Click OK.

This guide goes over the following:

Overview
Use image substitution for art and icons

Artwork consists of line art or photographs, depending on the image type. The Sonos app displays album art, custom browse icons, ratings icons, and service logo image types. Your content service sends these to the Sonos app to render. See below for more details about these image types.

Album art

Photographs associated with an album, artist, playlist, or trackMetadata object. See Add album art for details.

Custom browse icons

Line art that can represent a category, genre, or other container type in the Sonos app. For example, you can use these items in your root browse screen to show the initial categories that a listener can choose from. See Add browse icons for details.

Ratings icons

Ratings icons are line art images that represent the ratings state available to or chosen by the listener. See Add ratings for details.

Service logos

Service logos are line art images that represent your service in the music catalog. Listeners see this logo when searching for your content service to add it to their Sonos system. They then see the logo once they’ve added your service and they want to use it. Service logos represent your brand in the Sonos app. See Add logos for details.

Version 5 of the Sonos app introduced a redesign that can use the high resolution displays of iOS and Android devices.

The table below lists the supported Sonos apps and image formats. Click a link in the product column to read the product documentation.

Sonos Apps	Description	Product	Image Format
WDCR	Windows desktop app (legacy user interface)	Sonos app for Mac or PC	PNG
MDCR	Mac OS desktop app (legacy user interface)	Sonos app for Mac or PC	PNG
ICR	iOS app	Sonos app for mobile devices	SVG
ACR ACR-HDPI	Android app for tablets and phones	Sonos app for mobile devices	SVG
CR200	Custom Sonos controller (legacy user interface)	Sonos CONTROL (CR200) PDF	PNG

Photographs need to be delivered in specific sizes, in JPG or PNG format, and with a density of 72 DPI. Files that specify a different DPI setting may not display correctly in every Sonos app.

Validate your SVG using the W3C Markup Validation service. Be sure that the ‘Document Type’ is specifically set to SVG 1.1 Basic.

Your logos must pass validation before you submit your service for certification by Sonos.

Artwork appears in many different sizes, depending on the device and where the the Sonos app shows the art. Therefore, the Sonos app uses image substitution to deliver a high-quality visual experience for every instance. Album art and custom browse icons use similar image substitution rules since they both use the albumArtURI element to display images. Sonos scales artwork by taking the largest size above what is required by the app and downsampling it.

Image substitution and album art

Set the substitution rules for images in the presentation map (see Customize display for details). When the Sonos app requests album art, it will look at these rules to see if there is a value to substitute in the albumArtURI for the image. If there is, the app will use the substitution rules to rewrite the URI to get an image of the appropriate size.

Sonos Desktop App Mac

For example, if you sent the following albumArtURI for album art:

<table><tbody><tr><td><div><span>http</span><span>:</span><span>//yourmusicservice.example.com/cdn-directory/aa-id_600.png</span></div></td></tr></tbody></table><p>If you did not provide a 600 x 600 image, the Sonos app would pick the closest image that you provide and resize it.</p><h2><span>Image substitution and custom browse icons</span></h2><p>The above applies to custom browse icons as well.</p><p>The Sonos app would use the URI for the following image for the browse icon if you do not provide any substitution rules:</p><div><textarea wrap='soft' readonly='>http://yourservice.example.com/icons/playlists_legacy.png

http://yourservice.example.com/icons/playlists_legacy.png

If the listener is using a phone or tablet, the Sonos app follows the substitution rules you set and replaces the “_legacy.png” with one of the SVG images, depending on the device and screen. For a small screen, it might substitute the “_legacy.png” in the albumArtURI for “_40.svg”, resulting in the following URI:

</div><img src='https://cdn.dribbble.com/users/275046/screenshots/3185957/sonos-desktop.jpg' alt='Sonos App Mac Desktop' title='Sonos App Mac Desktop' /><table><tbody><tr><td><div><div>2</div><div>4</div><div>6</div></div></td><td><div><div><span><</span><span>Match</span><span>></span></div><div><span>Sample </span><span>URI</span><span>:</span><span>http</span><span>:</span><span>//yourmusicservice.example.com/cdn-directory/aa-id_180.png</span></div><div><span>imageSizeMap</span><span><</span><span>/</span><span>code</span><span>></span><span><</span><span>sizeEntry </span><span>size</span><span>=</span><span>'180'</span><span>substitution</span><span>=</span><span>'_180.png'</span><span>/</span><span>></span><span><</span><span>sizeEntry </span><span>size</span><span>=</span><span>'300'</span><span>substitution</span><span>=</span><span>'_300.png'</span><span>/</span><span>></span><span><</span><span>sizeEntry </span><span>size</span><span>=</span><span>'600'</span><span>substitution</span><span>=</span><span>'_600.png'</span><span>/</span><span>></span><span><</span><span>sizeEntry </span><span>size</span><span>=</span><span>'1000'</span><span>substitution</span><span>=</span><span>'_1000.png'</span><span>/</span><span>></span><span><</span><span>/</span><span>imageSizeMap</span><span>></span><span><</span><span>/</span><span>Match</span><span>></span><span><</span><span>/</span><span>PresentationMap</span><span>></span></div></div></td></tr></tbody></table><p>The sample presentation map above shows that your service has provided four different album art sizes. Sonos will pick one of these sizes depending on the device a listener is using and the screen they are viewing. If the Sonos app is looking for a size that is not listed, it will use the next closest image that is listed.</p><p>The base <code>albumArtURI</code> is what your service first sends Sonos in a <code>getMetadata</code> response. You must include a <code>sizeEntry</code> for the base <code>albumArtURI</code> in your <code>imageSizeMap</code>. The Sonos app will use the rules set in the <code>imageSizeMap</code> to show the best available size for the screen and device. This might mean using the base URI for album art, or using substitution rules to rewrite the URI for a different size image URI.</p><h3 id='sonos-app-osx'>Sonos App Osx</h3><p>This <code>ArtWorkSizeMap</code> shows that an <code>albumArtURI</code> with the string “_180.png” in it has a “size=180” for 180 x 180 images. To get a 600 x 600 image, the Sonos app will use string substitution to replace “_180.png” with “_600.png”.</p><h2><span>Set up image substitution for custom browse icons</span></h2><p>To set up image substitution for custom browse icons, define your icon artwork sizes using the <code>browseIconSizeMap</code> element in a <code>PresentationMap</code> of type <code>BrowseIconSizeMap</code>. The <code>imageSizeMap</code> sets the rules the Sonos app uses to pick the custom browse icon with the best resolution to display using <code>sizeEntry</code> elements.</p><p>Set a <code>sizeEntry</code> element for each size that you want to substitute. Set the size parameter of the <code>sizeEntry</code> element to the resolution size of the image that the Sonos app will request. Then set the substitution parameter to the substitution string. This should be a unique string for each size. For example:</p><div><textarea wrap='soft' readonly='><PresentationMap type='BrowseIconSizeMap'> <Match> <browseIconSizeMap> <sizeEntry size='0' substitution='_legacy.png'/> <sizeEntry size='40' substitution='_40.svg'/> <sizeEntry size='290' substitution='_290.svg'/> </browseIconSizeMap> </Match></PresentationMap>

<Match>

</Match>

The sample presentation map above shows that your service provides browse icons in three sizes. The Sonos app on Mac or PC will use the PNG image for your browse icons. The Sonos app on phones and tablets will use your substitution rules to choose the appropriate SVG image for your browse icons.

Note that the legacy icon is listed with a size of zero. Sonos requires this configuration to display custom browse icons on the Sonos app for MacOS and PC. It’s important that you specify this legacy icon as it’s the only one used by the Sonos app for Mac and PC. The Sonos app for mobile devices can handle high resolution images, so they’re more apt to use image substitution to display browse icons.

The base albumArtURI is the URI that your service sends Sonos in a getMetadata response. Use the PNG image format on the Sonos app for Windows and MacOS. See Sonos apps, above, for details.

Custom browse icons on the Sonos app for mobile devices uses the rules set in the browseIconSizeMap. These rules describe how the app should rewrite the URI for the appropriate SVG image.

If you do not provide SVG images or substitution rules, the Sonos app will resize the legacy PNG image as needed. This may not be the best visual experience for listeners. We recommend setting up substitution rules. Your listeners will appreciate it.

Provide an image that our Web team can scale and use on the Sonos site. Ideally, this image should satisfy the following requirements:

Sonos Desktop Controller App For Mac Or Pc

Width: about 300px
Height: about 100px
Format: .ai or .eps
Transparent background