JQTouch ne lit pas les fichiers mp3 liés

Question

J'essaie d'utiliser JQTouch pour faire un site mobile de base pour lire une liste de fichiers audio. J'essaie de faire une simple liste de pistes à utiliser dans une exposition d'art ici à l'école. Un peu comme ces visites à pied que vous avez pu voir. Lorsque je crée un lien vers un fichier mp3 dans une liste non ordonnée, le navigateur n'ouvre pas le fichier et commence à le lire. Il jette simplement du texte poubelle. Cela se produit à la fois dans un navigateur Web standard ainsi que sur mon iPhone et mon téléphone Android. Si je spécifie la destination du lien comme _blank, cela fonctionnera mais ouvrira le fichier dans une autre fenêtre qui doit être fermée pour retourner sur le site mobile. Je préférerais qu'un utilisateur clique simplement sur le lien et que le téléphone commence à lire l'audio.

J'ai essayé de travailler avec les tags audio pour HTML5 mais j'ai eu du mal à les faire fonctionner. Le joueur ne montrerait pas ou fait quelque chose de similaire au problème mentionné ci-dessus. Ce qui est étrange, c'est qu'après avoir cliqué sur le lien, le navigateur me montre que le lien est défini par #undefined. Pour être honnête, je ne suis pas très bien avec Javascript, donc ce pourrait être quelque chose d'assez évident, mais jusqu'à présent, il me échappe. Merci pour l'aide.

Vous pouvez voir mon mockup à http://trinity.edu/rchapman/iphone/

Answer 1

Vous ne pouvez pas lier directement à un fichier MP3 en HTML et avez-il jouer ... Vous allez devoir faire un peu de javascript ici:

En votre section de script:

changement

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

à

<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> 

changement

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

à:

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

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

Voir la audio tag et html5 rocks pour plus de détails.