JQTouch不会播放链接的mp3文件

时间:2010-07-19 21:10:45

标签: javascript jquery html5 jqtouch

我正在尝试使用JQTouch创建一个基本的移动网站来播放音频文件列表。我正在尝试制作一个简单的曲目播放列表,用于学校的艺术展览。有点像你可能见过的徒步旅行。当我链接到无序列表中的mp3文件时,浏览器不会打开文件并开始播放。它只是抛出垃圾文本。

在常规网络浏览器以及我的iPhone和Android手机中都会发生这种情况。如果我将链接目标指定为_blank,它将起作用,但在另一个窗口中打开该文件,该窗口必须关闭才能返回到移动站点。我希望用户只需点击链接并让手机开始播放音频。

我尝试使用HTML5的音频标签但是无法使它们正常工作。玩家不会显示或做与上述问题类似的事情。

奇怪的是,点击链接后,浏览器显示链接是#undefined。

公平地说,我用Javascript并不是那么好,所以它可能是相当明显的东西,但到目前为止我还没有。谢谢你的帮助。

您可以在http://trinity.edu/rchapman/iphone/

看到我的模型

1 个答案:

答案 0 :(得分:0)

你无法直接链接到HTML中的MP3文件并让它播放......你将不得不在这里做一些javascript:

在您的脚本部分:

变化

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

更改

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

有关详细信息,请参阅audio taghtml5 rocks