JQTouch не будет воспроизводить связанные mp3-файлы - PullRequest
Новая
       10

JQTouch не будет воспроизводить связанные mp3-файлы

1 голос
/ 20 июля 2010

Я пытаюсь использовать JQTouch, чтобы сделать базовый мобильный сайт для воспроизведения списка аудиофайлов. Я пытаюсь составить простой список треков для использования на художественной выставке здесь, в школе. Вроде как те пешеходные экскурсии, которые вы, возможно, видели. Когда я ссылаюсь на mp3-файл в неупорядоченном списке, браузер не открывает файл и не начинает его воспроизведение. Это просто подбрасывает мусорный текст.

Это происходит как в обычном веб-браузере, так и на телефонах iPhone и Android. Если я укажу ссылку назначения как _blank, она будет работать, но откроет файл в другом окне, которое должно быть закрыто, чтобы вернуться на мобильный сайт. Я бы предпочел, чтобы пользователь просто щелкнул ссылку и телефон начал воспроизводить аудио.

Я пытался работать со звуковыми тегами для HTML5, но у меня возникли проблемы с их работой. Плеер не показывал или делал что-то похожее на проблему, упомянутую выше.

Что странно, так это то, что после нажатия на ссылку браузер показывает мне, что ссылка #undefined.

Если честно, я не так уж хорош с Javascript, так что это может быть что-то довольно очевидное, но пока оно ускользает от меня. Спасибо за помощь.

Вы можете увидеть мой макет на http://trinity.edu/rchapman/iphone/

1 Ответ

0 голосов
/ 20 июля 2010

Вы не можете напрямую ссылаться на MP3-файл в HTML и воспроизводить его ... Вам нужно будет сделать несколько 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>

См. тег аудио и html5 пород для более подробной информации.

...