You are using an unsupported browser. Please update your browser to the latest version on or before July 31, 2020.
close

How to embed Spotify content into your Canvas pages

If you're interested in including music or podcasts in your Canvas course, you have a few options, such as using Kaltura to host files as well as directly uploading those files to Canvas. Another option available to you for including media in your Canvas pages is to embed a Spotify player into your Canvas page. This guide will show you how to do this using the HTML embed codes that Spotify provides its users.

Note: Your students must have a Spotify account (either free or premium) in order to listen to the full audio tracks that are embedded on a Canvas page. Users without an account can only listen to 30-second clips of the tracks in question.

Using the Spotify Embed Code in Canvas

  1. Spotify provides HTML embed codes for playlists, albums, artist pages, and individual media tracks. You will need to download Spotify's desktop app for Windows or Mac in order to access those codes.
  2. Once you have downloaded the desktop app, navigate over to the specific content you want to embed within Canvas. Click the ellipsis icon (...).
    The location of additional context menus for your selected Spotify content, including sharing options.
  3. This will cause a drop-down menu to appear. Select Share > Copy Embed Code.
    View of how to access the HTML embed code on Spotify content
  4. Navigate to the Canvas page you want to embed the Spotify content into, and click the Edit button.
  5. Click the HTML Editor link to access the HTML source code for the page.
  6. Once you're in the HTML editor, paste the code from Spotify into the HTML editor. After pasting the embed code, make sure to click the Save button at the bottom-right of the text box.
  7. Success! You have embedded your Spotify content into your Canvas page.
Please note that Spotify is a commercial service. We recommend reviewing Spotify's policies on non-personal use before embedding content from it in your Canvas site.
  • 1319
  • 16-Apr-2019
  • 3698 Views