Graham Walters

A wee site for the things I do

How to Fix SoundCloud not playing in Safari

I recently wrote an article on How to Fix Google Play Music not playing in Safari, and since then I’ve come across the same issue with SoundCloud. The problem is with the power saving feature called Safari Power Saver.

Safari Power Saver conserves battery life by intelligently pausing web videos and other plug‑in content when they’re not front and center on the web pages you visit.

SoundCloud is a little different in that it supports playing some songs using HTML5, which means some songs will play but any that use flash won’t.

The Debugging:

You can turn off Safari Power Saver, but then we’re back to wasting energy, so instead I came up with a little hack to get Safari to start playing my music. Safari is smart enough to remember which sites have been set to allow flash to start automatically, so all we have to do is get Flash to start once.

I started by looking through the HTML source to find where the embed elements were located, and started fiddling with the code to see if I could get the audio to play. After a bit of fiddling I figured out that, if I resized the element from 1px by 1px to something large enough to fill most of the screen, and then clicked on the larger element, the audio would start to play. From there I wrote a simple script to do the resizing automatically from the console.

The Solution:

  1. Open SoundCloud in a new tab.
  2. Click on a song to start playing music as you would normally.
  3. Hold down the following keys: [option] + [command] + [C]. A console window should open.
  4. Paste the below code into the console like the images below shows:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    $('#flashAudioObject').removeAttr('width height').css({
      'width':'100%',
      'height':'100%',
      'max-width':'100%',
      'max-height':'100%'
    }).parent().css({
      'position':'fixed',
      'z-index' :'100',
      'width' : 'auto',
      'height': 'auto',
      'top'   : '50px',
      'bottom': '50px',
      'left'  : '50px',
      'right' : '50px'
    });
    
  5. Two things may happen here. One, if you clicked on a song using HTML5, the console will return []. Two, if you clicked on a song using flash, the console will return something similar to this 50px; bottom: 50px; left: 50px; right: 50px;">.... If you clicked on a song using HTML5, go back to step 2 and try a different song. If you clicked on a song using flash, click on the large box approximately 3 times.
  6. Your music should start playing (give it a second or two).
  7. If your music started playing, reload the tab to check your settings saved.
  8. Click on the same song as before, and it should just start playing…

Something went wrong — nothing happened!

First lets check if the changes applied:

  1. Open the preferences and navigate to the Advanced tab.
  2. Now look for "Internet plug-ins: Stop plug-ins to save power", and below it there should be a button which says "Details".
  3. Click on the "Details" button, and look for "soundcloud.com" in the list.
  4. If the button does not exist or "soundcloud.com" is not in the list, the hack didn't work. Restart Safari and start at step one again.

If you have tried the above instructions multiple times, and your music still isn’t playing, I recommend you take a look at the official support page. If you are receiving any errors in your console after running my code, please copy them into a comment below, and I will have a go at solving your problem.

This entry was tagged Safari SoundCloud