Scale an audio player? Audio player size on an iPhone

Get Started
1

Scenario: A very old website with streaming audio set to autoplay, owner now wants it to play on an iPhone. Designer (me) not particularly code sensitive and uses plugins and well supported paid options to achieve clients goals. Have looked at and implemented a number of players and can get them to work BUT many of the skins look tiny on the iPhone screen. The website is very simple and thus the play button can be of a reasonable size. Doesn’t require playlist, is a single song.

I’ve tried to adjust the skin on one of the players with somewhat patchy results. I can see it is possible but will take some time that I don’t have. Some of the players are more complex in their coding requirements, others are good out of the box but don’t have good documentation. Some are tricky on both counts.

I’m curious to know two things:

  1. Is it possible to scale an entire player easily or do you have to make larger sprites?
  2. Is there a good all purpose audio player you have used with a large skin (only needs a large play/pause button)?

Have looked at and tried lots of mainstream players but may have missed one. Am looking for the voice of experience to save me more fruitless experimentation. I’m assuming if there was a killer app out there I would’ve stumbled across it by now.

Thanks in advance.

2

Hi Slackr,

I don’t know if you ‘Need’ the audio streaming or if would be ok for a person to push a play button or auto play? The html 5 video and audio tag allow you to control their size and styling right from CSS. You can choose to use their default controls or implement custom ones.

Recently I implemented a Video that I used HTML 5 video that needed to resize from Desktop size to mobile and adapt to lanscape and portrait modes. The hardest part of this exercise was encoding the video for all the different phones and have good quality. The resizing works great, and it is full screen on the mobiles including iPhone. You cannot ‘stream’ the file, so instead they just load given the bandwidth speed. I found that by controlling the bitrate, even light bandwidth played the video fine, so you should be able to get the audio working ok.

In the web page I did the following:

 
<video preload controls>
            <source src="./video/my_video.mp4" type='video/mp4;' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
            <source src="./video/my_video.webm" type='video/webm;' type='video/webm; codecs="vp8,vorbis"'/>
            <source src="./video/my_vidoe.ogv" type='video/ogg;' type='video/ogg; codecs="theora,vorbis"'/>
            <object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="640" height="352">
              <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
              <param name="allowFullScreen" value="true" />
              <param name="wmode" value="transparent" />
               <param name="flashvars" value='config={"clip":{"url":"http://www.somesite.com/
                  my_video.flv","autoPlay":false,"autoBuffering":true}}'/>
              <!-- Image Fallback. Typically the same as the poster image. -->
            </object>
  </video>

An the CSS:

 
video {
    width: 90%;
    border: 3px solid #362645;
    margin: 20px 0 0 0;
    padding: 1em;
    -moz-box-shadow: 0 0 8px hsla(0,0%,20%,.8);
    -webkit-box-shadow: 0 0 8px hsla(0,0%,0%,.8);
    box-shadow: 0 0 8px hsla(0,0%,0%,.8);
    -moz-border-radius: 3px;
}

I know that this is a video example; however the audio tag will work much the same. You will have to have varying formats suitable for each mobile you want to support and then the CSS to style it.

Hope this helps,
Steve

3

Thanks for the reply Steve. In the end I adapted the Jplayer’s Circle Skin. I actually started there but had some difficulties in getting the skin to behave as I wanted it to. Was a great exercise in seeing what is available and lamenting at the lack of browser standards.

I crossed the path of using HTML commands but the native player controls are too small. Wasn’t quite up to the task of getting a custom button made. Got the two parts working (ie button toggle and music starting) just couldn’t put them together. Is my biggest weakness, code floats in one eye and out the other minus the memory part of my brain.

Was very interesting to see the parculiarities of the iphone suite too.

Thanks again.

4

Glad you found a solution!

Yes the HTML native controls do get too small, their API is quite simple but then there is a fair bit more of CSS and graphic work in creating the controls.

Regards,
Steve