Tag Archives: sound tiger

X-UA-Compatible causes non-valid HTML5

Posted on by

It’s just something you’ll have to live with, and another reason why trying to live and die by standards is stupid. Doing so often leaves some users without experimental features (remember -moz-border-radius?); even if others can’t see them, you can still improve your website for others.

The annoying thing is that I don’t need X-UA-Compatible on my web app. The only reason I need to use it is to stop Internet Explorer incorrectly telling people “this website is probably broken, you know. Click here to fix that.”

Websites, including html5boilerplate, appear to be telling people to use <meta http-equiv="X-UA-Compatible" content="IE=edge" />, which means to say “this is supported in every future version of IE, and current ones”. I don’t find that to be a sensible choice though. If you’re going to use this invalid meta element, why not actually have it work properly?

For Sound Tiger, I decided to set it to IE=9.

My Project is Unsuitable for Paper Prototyping

Posted on by

I was really looking forwards to paper prototyping, and read Carolyn Snyder’s (US) book. I was planning on creating my widgets and elements this and last week but keep running into problems…

I wanted to use this technique based on advice from my tutor to figure out if my UI is intuitive enough; I’ve managed to fit all the elements I want to show of the media player on one screen, and have missed off a few widgets (like the song progress bar, and length and genre information) which could be considered risky. It’s of wasting a lot of time coding I could jot the idea down on paper and ask a focus group of users to let me know what they thought of the idea on paper. Super quick, in theory. If they don’t like it, I can literally pencil the changes in.

It could also help with the flow of the application, removing the will the user understand that they have to click this bit of the UI to get to this page..? worry. You ask them to do a task (“Can you add a song by Coldplay to the now playing queue.”) and then see how they go about doing it. Was it easy for them? Could they instantly find the play button?

But as I mentioned, problems occurred.

The first issue was that I did it on paper. “Paper prototyping” is a misnomer, as paper is too light. Too easy blown away by a sneeze, and too hard to pick up to move around. You need something heavier, like card. This wasn’t an issue though, I could just get some card (I actually had a tonne of card stock lying around.) However, it meant redrawing what I’d already done onto the card.

The drawing was very, very hard for me. Simple boxes would end up being horribly unaligned, in such a way I couldn’t fit the rest of the elements on (which would easily fit on a screen when done with CSS). My play button looked more like an oversized equilateral when next to the badly drawn next track button. The book mentions, as well as everyone else, that good drawing isn’t a requisite. But it wasn’t something I could be any more than embarrassed about.

A fairly messy looking paper UI...

My ill fated attempt with recreating my UI on paper

I decided to try an do it all on Photoshop, and print the elements onto card. That’d get rid of my issues with drawing. I spent two hours today in a lab trying to use Photoshop to create an empty rectangle with a stroked edge. That’s definitely not a piece of software you can pick up and play with. You need training, which I can’t get and don’t have time for. This is not a rapid way of doing testing, like the book boasts.

My prototype would have to be fairly data heavy too; sample track titles and artists on individual bits for the user to be able to drag around. Once they move to another view, I’d have to spend a few minutes sorting on the paper, only for the user to potentially decide to “go back” and have to redraw it all again.

Paper prototyping is usually carried out by a number of people – at least three really. Snyder says maybe two, but that’s an absolute extreme. Pushing myself down to a session with just one person is incredibly hard, I expect.

None of these issues are issues with the testing method. It’s more a reflection on my constraints. All of them can be fixed with having more people, and one of them with marginally better skill at drawing sketched boxes. However, it is what it is, and I won’t be able to use Paper Prototyping.

I’m glad I learnt about it though, and will definitely be trying to use this again in the future when I’m in a team at work.

MP3s and Grouping By Album

Posted on by

It’s a little more annoying than I’d like to be able to group by an album.

The need to group a set of songs by album is obvious when you’re trying to create a page which lists unique albums, and lets the user click through to view the tracks in the album.

When a user gives a set of MP3 files, all the data I have about the files is in the ID3 tags, and looks a little like this:

    array
      'title' =>
        array
          0 => string 'I Feel Fantastic' (length=16)
      'artist' =>
        array
          0 => string 'Jonathan Coulton' (length=16)
      'composer' =>
        array
          0 => string 'Jonathan Coulton' (length=16)
      'album' =>
        array
          0 => string 'Our Bodies, Ourselves, Our Cybernetic Arms' (length=42)
      'year' =>
        array
          0 => string '2005' (length=4)
      'encoded_by' =>
        array
          0 => string 'iTunes v4.9' (length=11)
      'comments' =>
        array
          0 => string '00001630 00000344 0000E27C 000031E5[...]
          1 => string 'From the soundtrack for the Future [...]
      'track_number' =>
        array
          0 => string '2/5' (length=3)

(That’s the data from Jonathan Coulton’s I Feel Fantastic, which you can download for free under a CC license.)

The similar data between tracks for each album are: encoded_by (not helpful, different tracks may have been obtained in different ways), comments (not helpful, same reason as encoded_by), year (potential candidate), album title (very helpful), artist (somewhat helpful).

None of that data is actually helpful to find a unique album since all the data may be used by another completely different album.

For instance, the album name alone doesn’t help; there are many albums called Resurrection. And even the artist name doesn’t guarantee a unique album; Westlife have two self titled albums, and two ‘Greatest Hits’ albums. Both of these cases can be solved by including the year though (though, this is assuming that the year is the same across the entire album).

It gets more complicated when you think of compilation albums; same album name, but many different artists.

For this iteration I’m going to focus on grouping albums by artist name, band name, and year on the track. Compilation albums won’t be supported in this three month development release, but instead they’ll show as a different album for each artist on the compilation.

I think that’s a good fall back because you can still listen to the music, and saves me a lot of time coding in work arounds for compilations and exceptions (which will have to be done in the second three months of development).

A bit of organisation: bug tracking

Posted on by

I’m not really at the part of my project which requires bug tracking just yet, since I’m just starting but I still have a use for it.

When I start a new class, like the Import one I’ve just been working on, I like to write out the methods with their parameters I’m expecting. This was easy this time, since I had class diagrams to follow, but usually this helps me notice logical inconsistencies in the way I think it should work. Then I quickly run through and fill out the methods with their general purpose.

At that point, I usually notice small bugs, or since I just want to have something to ship, edge cases which aren’t handled well. Typically I’ll add a double-hash-comment, like ## This will fail if we've not been given an absolute path. And then later, once I’ve done the main focus of the class I’ll do a directory wide search for ## and fix those issues.

I realised that’s a fair bit informal, and can lead to unexpected results if anyone but me uses the software. It’s easy to miss these comments if a search doesn’t pick up on them, or I forget to look out for them. They’re very much “out of site out of mind” issues.

That’s why I wanted a super lightweight bug tracker (though, my purpose is more of an issue tracker I suppose). I wanted to use FogBugz, but they don’t have a free version. Trac and Bugzilla are both too overkill, especially for a one man team.

Stackoverflow pointed me towards Unfuddle though.

Unfuddled dashboard for Sound Tiger

It’s much lighter than the alternatives, or at least the UI makes it feel less intimidating. Most importantly they have a free package for people with small teams, like me.

Also, which was a nice addition, they let me upload my git repo. That’s another place I can consider my software backed up.

Playing MP3 Files In Every Browser

Posted on by

I’ve been looking into various ways of being able to playing MP3 files within the browser, trying to avoid using Flash. Spoiler alert: You can’t do it just yet.

I’ve ended up using another player called jPlayer. (Demo on my prototype page.) It’s a jQuery library which uses HTML5 where ever possible but is able to fall back to Flash if it’s needed, like in Firefox.

The Flash player is invisible when you end up using it, and you control it entirely through the Javascript, which means your UI can be however you want it to look.

I was raving about jsMad, but it doesn’t look like it’s up to the task just yet. The people behind it are planning to spend more time on it in the future though, so that’s definitely exciting.

The Importance of Tooltip Wording

Posted on by

I was in a non-technical lecture last week (on entrepreneurial idea generation) and the lecturer wanted to show us a video to kick off our session. (It was actually an amazing Steven Johnson video, Where Good Ideas Come From.)

What interested me, probably on par with the video, was the way the lecturer tried to get the volume fixed to play the video.

She was setting up the laptop, got to the Youtube video, and said, before starting, “the trickiest thing about playing videos in lectures is getting the sound to work usually.” So we can deduce that this is a problem she has usually.

She made sure the laptop’s volume was turned up – she was fine with that. Then it came to the volume on the Youtube video. When you hover over the volume button this is what you see:

The volume control rolls out (as it should, to hide unnecessary parts of the UI to make it less complex), and the tooltip you see says “Mute”. The lecturer made sure the volume slider was knocked all the way up to 100%.

And here’s where she got confused. She clicked on the volume button.

Everyone in the lecture theatre (largely just 20 year old students, all bought up with the Youtube interface) blinked at her, a little confused. Someone said “You need to click the volume button again, to unmute it.” And she said “but then the tooltip says that it’s muted…”

What had happened was that she saw the tooltip and read it as the current state: “Mute”. So clicking it again would change the state to unmuted, in her mind. It completely make sense, if you think about it. The tooltip here, being both a verb and an adjective, makes its action ambiguous.

All of the YouTube interface uses verbs as the tooltip, so you’d think that would have made it obvious that the ‘mute’ text was also a verb. But it looks like that isn’t enough to be completely obvious.

Maybe tooltips should be more descriptive.

 

Week 3 in Sound Tiger Development

Posted on by

This week, I’ve not put the hours in I wanted to. That’s probably why there’s no “week 2″ update.

After learning more about the licensing (see last post), I’ve decided I’m going to risk it and just use getID3, the GPL library. Which means, for now, Sound Tiger is all under a GPL license. Not that there’s any code around yet anyway.

Grabbing ID3, or whatever other meta data I can, is relatively painless now.

I have run into the issue I expected with streaming MP3 audio though, with Firefox. I’m looking into jsmad at the moment. Though, there’s no documentation for it, and the code base is larger than I want to dig through. I’ve also no idea where the player is initiated on the jsmad homepage, so can’t just look through the source (no idea what I’m looking for).

There’s also an issue with jsmad when the tab playing music is in the background. The sound stutters. I expect that’s because Firefox gives tabs in focus more demand of the JS cycles. Apparently this should be fixed when audio workers are installed (don’t know when).

I have the database table designs done now too.

I’ve not had any time to work on a mock UI so far. Which is a week (almost two) I’m behind on that particular item. That’s happened because the ID3 data and MP3 streaming both had issues with them (licensing issues with ID3, and technical with streaming) which meant I’ve spent most my time trying to work around those.

Licensing and Ownership around University Projects

Posted on by

This information is specific to De Montfort University, and may not apply to others. It’s quite likely though.

This is something I was curious about at the start of my project, and have only now really looked into it because my project will have to be released under a certain type of license.

In order to get track meta data, I was hoping to use a third part library. The only one I’ve come across for PHP is getID3(). The issue is that it’s under a GPL license. That means that if the library is integral to Sound Tiger then the rest of the source needs to be GPL too.

It is integral: without this library I won’t be able to display meta data (album title, track name, artist) for tracks which makes the software essentially unusable. Rewriting this library wasn’t something I was planning on doing, though may do so in the future, just not for at least six months.

I’ve no issue with making my project GPL compatible. However, I wasn’t sure if I had the authority to make it so.

The contract relating to intellectual property rights concerning student software as part of their course says that the university is the sole owner. This means that I don’t have the right to apply GPL.

I emailed a few people and ultimately ended up in an impromptu meeting with a gent from ProspectIP, who give advice to students about IP matters. I learnt that that clause I mentioned about isn’t always enforced – in fact it’s often considered that the software (or anything a student produces) remains with them, but the university still gets first dibs on if they want to take a stake, and reserve the right to.

The university will only really step in to help secure the IP, and at most take a 50-50 profit share. Though that’s only likely in cases where a large amount of money is about to be made. Something like Sound Tiger, which I don’t expect to make a living off if I ever do sell it, won’t be of much interest to them. There’s not much academic value in my project to interest them either, likely.

So it’s looking like this is less of an issue. I shall bring this up in my next meeting with my supervisor, and seek permission to use GPL’d code in my software.

With the future in mind though, I will be keeping a separate non-GPL version for potential commercial sale.

Week 1 in the development of Sound Tiger

Posted on by

Just a quick run down post for what I did with my ten hours or so during week 1 of the year.

Sticking with my gantt chart, I spent the week analysing and reading a lot about user interface and user experience design.

There’s a lot of small aspects of design which people have put entire research in to, like a journal I read looking into if right handed people respond better when you treat their mouse as if it’s their right hand, and so have controls on the right hand side of the screen (they do).

After reading a few of these journals with their ideas, I decided to test them out in the real world and had a few of my friends fill out a questionnaire I made in a few hours. I got feedback which was sometimes a little surprising; almost everyone had bought music from within their media player (I was curious if a piece of software which has always been a media platform can easily translate its business model into a sales platform – they can, apparently), people rarely use album art as visual aids for navigation but they do still like to have them around to add colour to the player.

As a programmer — especially one who’s just read “don’t add useless parts of the UI” in many journals — finding out that some elements just don’t fill a purpose make me wonder why they’re still there, cluttering up the UI. Specifically here I mean the “genre” attribute. I know for definite that all my genre list either says “alternate”, “alt rock”, “alt” or is just blank. Most people agree with me, when asked how they felt about the genre column the majority responded “it’s almost always wrong”, or that it doesn’t affect what they listen to. Why is it still there? It’ll be off by default in Sound Tiger.

I’ve also seen how important it is to spend time writing a good questionnaire. Previously it’s been a method thrown together to look like you’ve done some research, and so I approached it the same lackluster way this time around too. I wrote in my natural voice, which is often leading. That meant the questions were biased where they should have been neutral. Although there was always an “Other” option, with a plain textfield alongside it, leading questions could be why the answers were often so uniform.

All my conclusions about my research have been talked about in my analysis of current media players. This isn’t complete to the standard I’d like it just yet. The Gantt chart overlord still says I have a week left, though I doubt it’ll change too much.

This week, I’m more excited since I’m actually getting down to technical stuff.

The project timetable for this week has me designing ERDs for the database schema for storing meta data about the music. I’ll likely start on some class diagrams too, specifically for each track, album, and artist.

I’ll also be doing some research into how I’m going to get audio to stream to the browser. This’ll have to be MP3 files predominately, in Firefox 6, IE 9, Opera 11, Safari 5, and Chrome. I know that there will be some licensing issues with MP3 amongst some of the more cautious browsers, so I’ll have to look around for ways around that.