JQTouch won't play linked mp3 files

Question

I'm trying to use JQTouch to make a basic mobile site to play a list of audio files. I'm trying to make a simple playlist of tracks to be used in an art exhibit here at school. Sort of like those walking tours you may have seen. When I link to an mp3 file in an unordered list the browser doesn't open the file and start playing it. It simply throws up trash text.

This happens both in a regular web browser as well as my iPhone and Android phones. If I specify the link destination as _blank it will work but opens the file in another window which has to be closed to go back to the mobile site. I would prefer for a user to simply click on the link and have the phone start playing the audio.

I tried working with the audio tags for HTML5 but had trouble making them work. The player would not show or did something similar to the problem mentioned above.

What's strange is that after clicking on the link the browser shows me that the link is #undefined.

To be fair I'm not all that great with Javascript so it might be something fairly obvious but so far it eludes me. Thanks for the help.

You can see my mockup at http://trinity.edu/rchapman/iphone/

Answer 1

You can't link directly to an MP3 file in HTML and have it play... You are going to have to do some javascript here:

In your script section:

change

<script type="text/javascript" charset="utf-8">
    $.jQTouch({
        icon: 'tower_logo.png',
        statusBar: 'black'
    });
</script>

to

<script type="text/javascript" charset="utf-8">
    $.jQTouch({
        icon: 'tower_logo.png',
        statusBar: 'black'
    });
            $(document).ready(function () {
                    var audio = $('#audio');
                    $('#audio1').tap(function() { audio.attr('src', 'audio1.mp3')[0].play()});
                    $('#audio2').tap(function () {audio.attr('src', 'audio2.mp3')[0].play()});
            });
</script>

change

<ul class="edgetoedge">
    <li><a href="audio1.mp3">Item 1</a></li>
    <li><a href="audio2.mp3">Item 2</a></li>
</ul>

to:

<audio id="audio"></audio>

<a href="#" class="whiteButton" id="audio1">Item 1</a>
<a href="#" class="whiteButton" id="audio2">Item 2</a> 

See the audio tag, and html5 rocks for more details.