Прогресс и загрузка файла через audio js api

Ratnikov310 · August 16, 2012

Как реализовать прогресс бар с индикатором загрузки файла? :blink:


===================>========——————-
      ^                                     ^                                 ^
 Загружен часть             Прогресс    Не загруженная часть

Edited August 16, 2012 by Ratnikov310

wwt · August 16, 2012

http://blog.webtricks.pro/2011/04/ajax-upload-file-progress-bar/ в примере используется библиотека ExtJS но при определенных навыках это переписывается под любой другой фреймворк, а серверная часть может остаться и такой же. Плюс верстка самого визуального оформления прогрессбара рассмотрена тут в виде задания и готового решения , либо можно использовать готовые UI компоненты фреймворков.

Ratnikov310 · August 16, 2012

Имеется ввиду


<audio id="player"></audio>
<script>
function play(){player.play();}
	function pause(){player.pause();}
	function stop(){player.pause(); player.currentTime=0;}
function load(id){
		if(player.canPlayType('audio/mp3')==''){return false;}
		else {
		var src='audio/<?echo $user;?>/'+id.innerHTML+'.mp3';
		player.src=src;
		title.innerHTML=id.innerHTML;
		player.play();
		}
	}
</script>

Знаю про currentTime, но про загрузку хз =( (о этом эвэнте я и добиваюсь))))

Ес-но AJAX и фреймворки я вообще ни знаю.

Edited August 16, 2012 by Ratnikov310

wwt · August 16, 2012

Речь идет об индикаторе для плеера? тогда вам сюда http://msdn.microsoft.com/ru-ru/library/ie/gg589528%28v=vs.85%29.aspx

ЗЫ я подумал об индикаторе для загрузки файла на сервер вначале.

Edited August 16, 2012 by wwt

Ratnikov310 · August 16, 2012

читал, не нашел(, может напишите фрагмент :blush:

wwt · August 16, 2012

Чего ненашли? Полный код страницы с плеером из статьи выше:


<!DOCTYPE html>
<html>

    <head>

        <title>Using media events to add a progress bar to an audio player</title>
        <!-- Uncomment the following meta tag if you have issues rendering this page on an intranet site. -->    
        <!--  <meta http-equiv="X-UA-Compatible" content="IE=9"/> --> 
        <style id="inlinecss" type="text/css">
            /* put a border around the canvas element */
            #canvas  
            {
                margin-top:10px; 
                border-style:solid; 
                border-width:1px; 
                padding:3px; 
            }
        </style>
        <script type="text/javascript">
            //Global variable to track current file name        
            var currentFile = "";

            //display and update progress bar
            function progressBar() { 
                var oAudio = document.getElementById('myaudio'); 
                //get current time in seconds
                var elapsedTime = Math.round(oAudio.currentTime);
                //update the progress bar
                if (canvas.getContext) {
                    var ctx = canvas.getContext("2d");
                    //clear canvas before painting
                    ctx.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight);
                    ctx.fillStyle = "rgb(255,0,0)";
                    var fWidth = (elapsedTime / oAudio.duration) * (canvas.clientWidth);
                    if (fWidth > 0) {
                        ctx.fillRect(0, 0, fWidth, canvas.clientHeight);
                    }
                }
            }
            //Play and pause function 
            function playAudio() {
                try {
                    //return objects we need to work with 
                    var oAudio = document.getElementById('myaudio'); 
                    var btn = document.getElementById('play');
                    var audioURL = document.getElementById('audiofile');               

                    //Skip loading if current file hasn't changed.
                    if (audioURL.value !== currentFile) {
                        oAudio.src = audioURL.value;
                        currentFile = audioURL.value;                        
                    }

                    //Tests the paused attribute and set state. 
                    if (oAudio.paused) {
                        oAudio.play();
                        btn.textContent = "Pause";
                    }
                    else {
                        oAudio.pause();
                        btn.textContent = "Play";
                    }
                }
                catch (e) {
                    // Fail silently but show in F12 developer tools console
                    if (window.console && console.error("Error:" + e));
                }
            }

            //Rewinds the audio file by 30 seconds.
            function rewindAudio() {
                try {
                    var oAudio = document.getElementById('myaudio');
                    oAudio.currentTime -= 30.0;
                }
                catch (e) {
                    // Fail silently but show in F12 developer tools console
                    if (window.console && console.error("Error:" + e));
                }
            }

            //Fast forwards the audio file by 30 seconds.
            function forwardAudio() {
                try {
                    var oAudio = document.getElementById('myaudio');
                    oAudio.currentTime += 30.0;
                }
                catch (e) {
                    // Fail silently but show in F12 developer tools console
                    if (window.console && console.error("Error:" + e));
                }
            }

            //Restart the audio file to the beginning.

            function restartAudio() {
                try {
                    var oAudio = document.getElementById('myaudio');
                    oAudio.currentTime = 0;
                }
                catch (e) {
                    // Fail silently but show in F12 developer tools console
                    if (window.console && console.error("Error:" + e));
                }
            }

            //added events

            function initEvents() {
                var canvas = document.getElementById('canvas');  
                var oAudio = document.getElementById('myaudio');

                //set up event to toggle play button to pause when playing
                oAudio.addEventListener("playing", function() {
                    document.getElementById("play").textContent = "Pause";
                }, true);

                //set up event to toggle play button to play when paused
                oAudio.addEventListener("pause", function() {
                    document.getElementById("play").textContent = "Play";
                }, true);
                //set up event to update the progress bar
                oAudio.addEventListener("timeupdate", progressBar, true); 
                //set up mouse click to control position of audio
                canvas.addEventListener("click", function(e) {
                    //this might seem redundant, but this these are needed later - make global to remove these
                    var oAudio = document.getElementById('myaudio'); 
                    var canvas = document.getElementById('canvas');            

                    if (!e) {
                        e = window.event;
                    } //get the latest windows event if it isn't set
                    try {
                        //calculate the current time based on position of mouse cursor in canvas box
                        oAudio.currentTime = oAudio.duration * (e.offsetX / canvas.clientWidth);
                    }
                    catch (err) {
                    // Fail silently but show in F12 developer tools console
                        if (window.console && console.error("Error:" + err));
                    }
                }, true);
            }
            //this event gets fired when a page has loaded
            window.addEventListener("DOMContentLoaded", initEvents, false);
        </script>
    </head>    
    <body>
        <h1>HTML5 audio player with progress bar</h1>
        <p>
            <input type="text" id="audiofile" size="80" value="demo.mp3" />
        </p>
        <audio id="myaudio">
            HTML5 audio not supported
        </audio>
        <p>
            <button id="play" onclick="playAudio();" disabled>
                Play
            </button>
            <button id="rewind" onclick="rewindAudio();" disabled>
                Rewind
            </button>
            <button id="forward" onclick="forwardAudio();" disabled>
                Fast forward
            </button>
            <button id="restart" onclick="restartAudio();" disabled>
                Restart
            </button>
        </p>
        <p>
            <canvas id="canvas" width="500" height="20">
                canvas not supported
            </canvas>
        </p>
        <script type="text/javascript">
            //Check for support and enable buttons
            if (window.HTMLAudioElement) {
                document.getElementById("play").disabled = false;
                document.getElementById("rewind").disabled = false;
                document.getElementById("forward").disabled = false;
                document.getElementById("restart").disabled = false;
            }
        </script>
    </body>

</html>

ЗЫ я вообще не очень понимаю что вы пытаетесь сделать, если вы хотите применить currentTime к загрузке файла на сервер, я вас разочарую это свойство не имеет к этому никакого отношения, это для отслеживания текущей позиции воспроизведения медиа файла.

Ratnikov310 · August 16, 2012

наверно вот это:



  var fWidth = (elapsedTime / oAudio.duration);
var elapsedTime = Math.round(oAudio.currentTime);

Но точно незнаю :unsure:

короче имеется ввиду - прогресс буферизации потокого файла!!

короче нашел на хабре, только видео (но метод такой же)

http://habrahabr.ru/company/microsoft/blog/127295/

акже будет полезным показывать буферизацию видео, для этого можно отталкиваться от события onprogress, срабатывающего при загрузке новых порций видео:
video.addEventListener("progress", function() {
    var buffered = [b]Math.floor(video.buffered.end(0)) / Math.floor(video.duration);
    controls.buffered[0].style.width =  Math.floor(buffered * controls.total.width()) + "px";[/b]
}, false);

wwt · August 16, 2012

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

Ratnikov310 · August 16, 2012

ну частично да

Sign In

Прогресс и загрузка файла через audio js api

Question

Ratnikov310

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

wwt

Link to comment

Share on other sites

Ratnikov310

Link to comment

Share on other sites

wwt

Link to comment

Share on other sites

Ratnikov310

Link to comment

Share on other sites

wwt

Link to comment

Share on other sites

Ratnikov310

Link to comment

Share on other sites

wwt

Link to comment

Share on other sites

Ratnikov310

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information