Аудиоплеер на HTML5 и JS для сайта. Не работает в Опере и Андроид

SanychBY

Доброго времени суток. Вот закончил писать плеер для сайта. Исходник прилагаю ниже. Но проблема такая, не работает в Опере и в системе Андроид, а это не есть хорошо. Подскажите пожалуйста как это исправить.Буду благодарен если подскажете как сделать счетчик вычисления сколько процентов песни пользователь прослушал.
<!DOCTYPE html>
<html>
<head>
    <title>Player</title>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <style type="text/css">
     .rngVol
     {
         display: none;
     }
        .audioBloks
        {
            border: 1px ridge red;
        }
    </style>
</head>
<body>
<script type="text/javascript">
    function setCookie(name, value, options) {
        options = options || {};
 
        var expires = options.expires;
 
        if (typeof expires == "number" && expires) {
            var d = new Date();
            d.setTime(d.getTime() + expires*1000);
            expires = options.expires = d;
        }
        if (expires && expires.toUTCString) {
            options.expires = expires.toUTCString();
        }
 
        value = encodeURIComponent(value);
 
        var updatedCookie = name + "=" + value;
 
        for(var propName in options) {
            updatedCookie += "; " + propName;
            var propValue = options[propName];
            if (propValue !== true) {
                updatedCookie += "=" + propValue;
            }
        }
 
        document.cookie = updatedCookie;
    }
    function getCookie(name) {
        var matches = document.cookie.match(new RegExp(
                "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
        ));
        return matches ? decodeURIComponent(matches[1]) : undefined;
    }
    function timeplay ()
    {
        rangeplay.value = audio.currentTime;
    }
    var startplay;
    var audio;
    var rangeplay;
    var chip;
    var audioid;
    var bplayid;
    var rangeid;
    var volume;
    var idButton;
    $(document).ready(function(){
        chip=1;
    });
    function stopPlay(idButt)
    {
        $('#'+idButt+'').attr('value','play');
        audio.pause();
        clearInterval(startplay);
    }
    function bplayckick(paramA,paramB,idB,idV){
        //alert(chip + paramA + " " + audioid);
        if(audioid!==paramA && chip!==1)
        {
            stopPlay(idButton);
        }
        idButton=idB;
        audioid = paramA;
        rangeid = paramB;
        volume = document.getElementById(idV);
        audio = document.getElementById(audioid);
        rangeplay = document.getElementById(rangeid);
        rangeplay.max = audio.duration;
        //alert(rangeplay.max);
        if(audio.paused)
        {
            audio.play();
            if(getCookie('volume')!=='undefined')
            {
                audio.volume = getCookie('volume');
                volume.value=getCookie('volume')*100;
            }
 
            $('#'+idB+'').attr('value','pause');
            startplay=setInterval(timeplay,1000/66);
            chip=2;
        }
        else
        {
            audio.pause();
            $('#'+idB+'').attr('value','play');
            clearInterval(startplay);
            chip=1;
        }
 
    }
    function mdown(paramA,paramB,idB){
        if(audioid!==paramA && chip!==1)
        {
            stopPlay(idButton);
            $('#'+idB+'').attr('value','pause');
        }
        idButton=idB;
        audioid = paramA;
        rangeid = paramB;
        audio = document.getElementById(audioid);
        rangeplay = document.getElementById(rangeid);
        rangeplay.max = audio.duration;
        if(chip==2)
        {
 
            clearInterval(startplay);
            if(audio.paused)
            {
                audio.play();
            }
            else
            {
 
 
 
            }
        }
 
    }
    function mup(idB,paramA){
        audio.currentTime = rangeplay.value;
        if(chip==1)
        {
            audio.play();
            $('#'+idB+'').attr('value','pause');
            startplay=setInterval(timeplay,1000/66);
            chip=2;
        }
        else
        {
            clearInterval(startplay);
            startplay=setInterval(timeplay,1000/66);
 
        }
    }
    function FunVolume(paramA,idV){
        volume = document.getElementById(idV);
        audio = document.getElementById(paramA);
        audio.volume = volume.value/100;
        setCookie('volume',audio.volume,['2678400','/','/','false']);
    }
    function overblosks(idV)
    {
        if(getCookie('volume')!=='undefined')
        {
            volume = document.getElementById(idV);
            volume.value=getCookie('volume')*100;
        }
 
        $("#"+idV+"").show();
    }
    function outBloks(idV)
    {
        $("#"+idV+"").hide();
    }
    </script>
<div class="audioBloks" onMouseOver="overblosks('rangeVol_1')" onMouseOut="outBloks('rangeVol_1')">
<audio class="audio" id="muz_1">
    <source src="../muz/Slipknot - Before i Forget.mp3" type="audio/mpeg">
    Тег audio не поддерживается вашим браузером.
</audio>
    <input class="s_p" onClick="bplayckick('muz_1','range_1','start_pauze_1','rangeVol_1')" type="button" id="start_pauze_1" title="start" value="play">
<input class="rng" type="range" id="range_1" onMouseDown="mdown('muz_1','range_1','start_pauze_1')" onMouseUp="mup('start_pauze_1','muz_1')" value="0" max="100" min="0">
    <input class="rngVol" type="range" id="rangeVol_1" onMouseMove="FunVolume('muz_1','rangeVol_1')" value="80" max="100" min="0">
</div>
<div class="audioBloks" onMouseOver="overblosks('rangeVol_2')" onMouseOut="outBloks('rangeVol_2')">
    <audio class="audio" id="muz_2">
        <source src="../muz/Stromae - Papaoutai.mp3" type="audio/mpeg">
        Тег audio не поддерживается вашим браузером.
    </audio>
    <input class="s_p" onClick="bplayckick('muz_2','range_2','start_pauze_2','rangeVol_2')" type="button" id="start_pauze_2" title="start" value="play">
    <input class="rng" type="range" id="range_2" onMouseDown="mdown('muz_2','range_2','start_pauze_2')" onMouseUp="mup('start_pauze_2','muz_2')" value="0" max="100" min="0">
    <input class="rngVol" type="range" id="rangeVol_2" onMouseMove="FunVolume('muz_2','rangeVol_2')" value="80" max="100" min="0">
</div>
</body>
</html>
Спасибо.
10 ответов

SanychBY

Я пока что в спешке не вникал Ваш код, но вот простой пример вычисления и показа процентов прослушанной части :
<div id=schyotchik>Тут будет показываться количество процентов</div>
<audio id=audio src = "mysong.ogg"></audio>
<button onclick="a.play();setInterval(timeplay,100)">Играть</button>
<script>
a=document.getElementById("audio");
b=document.getElementById("schyotchik");
 
function timeplay(){
    b.innerHTML=Math.floor(a.currentTime/a.duration*100)+" %";
}
</script>
А чтобы в Опере работало, попробуйте аудиофайлы конвертировать в формат OGG, и указать тип : type="audio/ogg" Конвертировать можно здесь : media.io


SanychBY

А чтобы в Опере работало, попробуйте аудиофайлы конвертировать в формат OGG, и указать тип : type="audio/ogg"
Придется кидать тогда и mp формате, и в ogg, что не желательно.
Я пока что в спешке не вникал Ваш код, но вот простой пример вычисления и показа процентов прослушанной части :
Мне не нужно его выводить. Мне необходимо отправить его на сервер, когда пользователь переключ на другую песню. + надо учитывать только то,что он прослушал, без перемотки
Мне не нужно его выводить. Мне необходимо отправить его на сервер, когда пользователь переключ на другую песню. + надо учитывать только то,что он прослушал, без перемотки
Это необходимо для последующего вычисления рейтинга песни.А как бы еще показывать на сколько песня загрузилась?


SanychBY

учитывать только то,что он прослушал, без перемотки
Я внедрил в Ваш код 3 переменные, которые обеспечивают реализацию этой задумки. В переменной taym откладывается общее количество процентов прослушанной части песни. Его и нужно отправлять на сервер. Свои строки от Ваших я отделил пустыми строками:
<script type="text/javascript">
    function setCookie(name, value, options) {
        options = options || {};
 
        var expires = options.expires;
 
        if (typeof expires == "number" && expires) {
            var d = new Date();
            d.setTime(d.getTime() + expires*1000);
            expires = options.expires = d;
        }
        if (expires && expires.toUTCString) {
            options.expires = expires.toUTCString();
        }
 
        value = encodeURIComponent(value);
 
        var updatedCookie = name + "=" + value;
 
        for(var propName in options) {
            updatedCookie += "; " + propName;
            var propValue = options[propName];
            if (propValue !== true) {
                updatedCookie += "=" + propValue;
            }
        }
 
        document.cookie = updatedCookie;
    }
    function getCookie(name) {
        var matches = document.cookie.match(new RegExp(
                "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
        ));
        return matches ? decodeURIComponent(matches[1]) : undefined;
    }
    
    muz_id="";
    taym=0;
    procent=0;
    
    function timeplay ()
    {
        rangeplay.value = audio.currentTime;
        
        currentProc=Math.floor(audio.currentTime/audio.duration*100);
        if(!(currentProc==procent)){procent=currentProc;taym++};
        
    }
    
    var startplay;
    var audio;
    var rangeplay;
    var chip;
    var audioid;
    var bplayid;
    var rangeid;
    var volume;
    var idButton;
    $(document).ready(function(){
        chip=1;
    });
    function stopPlay(idButt)
    {
        $('#'+idButt+'').attr('value','play');
        audio.pause();
        clearInterval(startplay);
    }
    function bplayckick(paramA,paramB,idB,idV){
    
        if(!(idB==muz_id)){
            muz_id=idB;
            /*
            Тут нужно вставить код отправки на сервер содержимого переменной taym
            Наверно с помощью ajax
            */
            taym=0;
        };
        
        //alert(chip + paramA + " " + audioid);
        if(audioid!==paramA && chip!==1)
        {
            stopPlay(idButton);
        }
        idButton=idB;
        audioid = paramA;
        rangeid = paramB;
        volume = document.getElementById(idV);
        audio = document.getElementById(audioid);
        rangeplay = document.getElementById(rangeid);
        rangeplay.max = audio.duration;
        //alert(rangeplay.max);
        if(audio.paused)
        {
            audio.play();
            if(getCookie('volume')!=='undefined')
            {
                audio.volume = getCookie('volume');
                volume.value=getCookie('volume')*100;
            }
 
            $('#'+idB+'').attr('value','pause');
            startplay=setInterval(timeplay,1000/66);
            chip=2;
        }
        else
        {
            audio.pause();
            $('#'+idB+'').attr('value','play');
            clearInterval(startplay);
            chip=1;
        }
 
    }
    function mdown(paramA,paramB,idB){
        if(audioid!==paramA && chip!==1)
        {
            stopPlay(idButton);
            $('#'+idB+'').attr('value','pause');
        }
        idButton=idB;
        audioid = paramA;
        rangeid = paramB;
        audio = document.getElementById(audioid);
        rangeplay = document.getElementById(rangeid);
        rangeplay.max = audio.duration;
        if(chip==2)
        {
 
            clearInterval(startplay);
            if(audio.paused)
            {
                audio.play();
            }
            else
            {
 
 
 
            }
        }
 
    }
    function mup(idB,paramA){
        audio.currentTime = rangeplay.value;
        if(chip==1)
        {
            audio.play();
            $('#'+idB+'').attr('value','pause');
            startplay=setInterval(timeplay,1000/66);
            chip=2;
        }
        else
        {
            clearInterval(startplay);
            startplay=setInterval(timeplay,1000/66);
 
        }
    }
    function FunVolume(paramA,idV){
        volume = document.getElementById(idV);
        audio = document.getElementById(paramA);
        audio.volume = volume.value/100;
        setCookie('volume',audio.volume,['2678400','/','/','false']);
    }
    function overblosks(idV)
    {
        if(getCookie('volume')!=='undefined')
        {
            volume = document.getElementById(idV);
            volume.value=getCookie('volume')*100;
        }
 
        $("#"+idV+"").show();
    }
    function outBloks(idV)
    {
        $("#"+idV+"").hide();
    }
    </script>
А как бы еще показывать на сколько песня загрузилась?
Не понял?


SanychBY

Не понял?
С НГ Вас! Ну обычно при просмотре видео или прослушивания песни показывается насколько оно захешировалось


SanychBY

С НГ Вас!
Взаимно !!!
показывается насколько оно захешировалось
Можно какой-то пример или ссылку? Честно говоря, не понял, о чём речь.


SanychBY

Можно какой-то пример или ссылку? Честно говоря, не понял, о чём речь.
да на ютьюб зайдите например, включите видео, красная полоса это сколько видео проигралось, а впереди серая - на сколько загрузилось


SanychBY

Ясно. Используйте для воспроизведения музыки флэшплеер вместо элемента audio, и будет так же само, как на ютьюбе.


SanychBY

Ясно. Используйте для воспроизведения музыки флэшплеер вместо элемента audio, и будет так же само, как на ютьюбе.
да как я понял его геморойно делать. да и хочу поддержать новые технологии html5=)а использовать что то стороннее я не люблю


SanychBY

Во многих случаях стало традицией использовать флэш. Это и приятно смотрится, и удобно во всех отношениях. Флешплеер можно разработать самому с помощью программы flash-MX.


SanychBY

Во многих случаях стало традицией использовать флэш
У меня принципиальная позиция против=) С само его введения (помню как захожу в нэт и практически на каждом сайте предлагают его установить) мне он как то не по душе. Хотя для веб разработки какое то время использовал Дремвевер. Да и коммерция у Adobe просто зашкаливает на мой взгляд.Установил я эту прогу. Теперь, как я понимаю, она Flash cs6 называется. Знать бы еще actionscript