我正在尝试使用 JQTouch 制作一个基本的移动网站来播放音频文件列表。我正在尝试制作一个简单的轨道播放列表,用于学校的艺术展览。有点像您可能见过的徒步旅行。当我链接到无序列表中的 mp3 文件时,浏览器不会打开该文件并开始播放。它只是抛出垃圾文本。
这种情况在常规网络浏览器以及我的 iPhone 和 Android 手机中都会发生。如果我将链接目标指定为 _blank ,它将起作用,但会在另一个窗口中打开文件,必须关闭该窗 Eloquent 能返回到移动站点。我希望用户只需单击链接并让手机开始播放音频。
我尝试使用 HTML5 的音频标签,但无法使其正常工作。播放器不会显示或执行与上述问题类似的操作。
奇怪的是,点击链接后,浏览器显示该链接是#undefined。
公平地说,我不太擅长 Javascript,所以这可能是相当明显的事情,但到目前为止我还是无法理解。感谢您的帮助。
你可以在 http://trinity.edu/rchapman/iphone/ 看到我的模型
最佳答案
您无法直接链接到 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 tag ,和 html5 rocks了解更多详情。
关于javascript - JQTouch 无法播放链接的 mp3 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3285135/