Html5 Audio Mobile Проблемы - PullRequest
Новая
       21

Html5 Audio Mobile Проблемы

0 голосов
/ 14 октября 2019

Создание списка воспроизведения аудио HTML5, который работает должным образом на мобильных устройствах, невозможно из-за использования JavaScript и современных мобильных стандартов. Независимо от настроек на Android кажется, что мобильные устройства убивают использование javascript, который необходим для перехода к следующей дорожке в конце дорожки.

Аудио HTML5 не позволяет создавать плейлист с самого начала, который может работать намобильный без блокировки экрана, чтобы использовать Javascript. Так, например, пользователь может начать воспроизведение, подключить наушники и отправиться на прогулку, не останавливая музыку в конце дорожек. Подключение устройства к USB, кажется, помогает в этом. Похоже, что возможность для пользователей инициировать блокировку экрана через взаимодействие с браузером появится довольно скоро, но предпочтительная блокировка системы не на ближайшем горизонте.

Так что, есть ли способ для звука HTML5 работать должным образомна мобильных устройствах в настоящее время загрузка новых треков после того, как телефон спит?

Я пробовал несколько обходных путей Javascript для перехода к следующей песне до конца трека и использования обратных вызовов с остановом для повторного запуска воспроизведения и / или перехода к следующей песнебезрезультатно.

это не мой основной код, а упрощенный плеер, который я пробовал. Будет использовать это, так как мой основной игрок более сложный процесс: 

 <style id="compiled-css" type="text/css">
          #playlist,audio{background:#666;width:400px;padding:20px;}
    .active a{color:#5DB0E6;text-decoration:none;}
    li a{color:#eeeedd;background:#333;padding:5px;display:block;}
    li a:hover{text-decoration:none;}
      </style>
 <script type="text/javascript" src="//code.jquery.com/jquery-1.7.js"></script>
 <audio id="audio" preload="auto" tabindex="0" controls="" type="audio/mpeg">
            <source type="audio/mp3" src="https://archive.org/download/gd83-09-02.sbd.unk.2174.sbeok.shnf/gd83-09-02d1t01.mp3">
 </audio>
        <ul id="playlist">
            <li class="active"><a href="https://archive.org/download/gd83-09-02.sbd.unk.2174.sbeok.shnf/gd83-09-02d1t01.mp3">wang dang</a></li>
            <li><a href="https://archive.org/download/gd1973-03-28.sbd.miller.86459.sbeok.flac16/gd73-03-28d2t01.mp3">no woman</a></li>
            <li><a href="https://archive.org/download/gd1968-10-12.sbd.miller.86759.sbeok.flac16/gd68-10-12d1t05.mp3">no mercy</a></li>
            <li><a href="https://archive.org/download/gd1970-05-02.138227.sbd.miller.flac1648/12ColdJordon.mp3">cold jordan</a></li>
   </li>
<script type="text/javascript">//<![CDATA[
    
     $(window).load(function(){
          
    var audio;
    var playlist;
    var tracks;
    var current;
    
    init();
    function init(){
        current = 0;
        audio = $('audio');
        playlist = $('#playlist');
        tracks = playlist.find('li a');
        len = tracks.length - 1;
        audio[0].volume = .10;
        audio[0].play();
        playlist.find('a').click(function(e){
            e.preventDefault();
            link = $(this);
            current = link.parent().index();
            run(link, audio[0]);
        });
        audio[0].addEventListener('ended',function(e){
            current++;
            if(current == len){
                current = 0;
                link = playlist.find('a')[0];
            }else{
                link = playlist.find('a')[current];    
            }
            run($(link),audio[0]);
        });
    }
    function run(link, player){
            player.src = link.attr('href');
            par = link.parent();
            par.addClass('active').siblings().removeClass('active');
            audio[0].load();
            audio[0].play();
    }
    
        });
    
      //]]></script>

Надеюсь, что для обхода спящего плейлиста на телефоне может понадобиться какой-нибудь взлом JavaScript. Прочитав изрядное количество материалов по этой теме, они, похоже, не могут быть решением, поэтому любые подтверждения того, что списки воспроизведения аудио html5 в настоящее время не работают на мобильных устройствах, также приветствуются.

...