文章/答案/技术大牛

发布

社区首页 >问答首页 >HTML5音频单击进度条可移动到不同的时间

问HTML5音频单击进度条可移动到不同的时间
EN

Stack Overflow用户

提问于 2012-07-29 10:28:56

回答 4查看 23.5K关注 0票数 7

<html>
    <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
        <script>
            $(document).ready(function(){

                var counter = 0;
                var numOfTracks = $(".audio-player").length;
                $("#play-bt").click(function(){
                    $(".audio-player")[counter].play();
                    $("#message").text("Music started");
                })

                $("#pause-bt").click(function(){
                    $(".audio-player")[counter].pause();
                    $("#message").text("Music paused");
                })

                $("#stop-bt").click(function(){
                    $(".audio-player")[counter].pause();
                    $(".audio-player")[counter].currentTime = 0;
                    $("#message").text("Music Stopped");
                })

                $("#next-bt").click(function(){
                    $(".audio-player")[counter].pause();
                    $(".audio-player")[counter].currentTime = 0;
                    counter++;


                    if(counter > numOfTracks - 1){
                        counter = 0 ;
                    }

                    $(".audio-player")[counter].play();
                    $("#message").text("Next Track started");
                })

                $("#prev-bt").click(function(){
                    $(".audio-player")[counter].pause();
                    $(".audio-player")[counter].currentTime = 0;
                    counter--;
                    $(".audio-player")[counter].play();
                    $("#message").text("Previous Track");
                })

                $(".audio-player").bind('timeupdate', function(){

                    //Gets the whole duration of the track.
                    //No idea kung saan ko ilalagay sa UI**IMPLEMENT LATER**
                    var track_length = $(".audio-player")[counter].duration;
                    var secs = $(".audio-player")[counter].currentTime;
                    var progress = (secs/track_length) * 100;

                    $('#progressbar').css({'width' : progress * 2});

                    //Will Use these later on production
                    //NOTE DO NOT DELETE
                    //Track Minutes
                    var tcMins = parseInt(secs/60);
                    //Track Seconds
                    var tcSecs = parseInt(secs - (tcMins * 60));

                    if (tcSecs < 10) { tcSecs = '0' + tcSecs; }

                    // Display the time. REMEMBER
                    $('#timecode').html(tcMins + ':' + tcSecs);
                })
            })
        </script>
            <style>

        /*Seperate this some time in the development*/

        #playerContainer{ 
            background-color: #A8A8A8  ; 
            width: 260px; 
            height: 55px;
            padding: 8px;
            border: 1px solid #d0d0d0;
        }
        /* Player Controls */

        /*list items of controls */

        #playerControls li { 
            display: block; 
            width: 32px; 
            height: 32px; 
            padding: 0px;
            float: left; 
            cursor: pointer;
        }

        #playerControls { list-style: none; padding: 0px; margin: 0px;}

        /*Images for each li items items */
        #play-bt { background: url('icons/glyphicons_173_play.png'); background-repeat:no-repeat }
        #pause-bt {background: url('icons/glyphicons_174_pause.png'); background-repeat:no-repeat;}
        #next-bt { background: url('icons/glyphicons_176_forward.png'); background-repeat:no-repeat}
        #prev-bt {background: url('icons/glyphicons_172_rewind.png'); background-repeat:no-repeat;}

        /*Progress Stuff*/


        /*Remember to manipulate its width via javascript later*/
        #progressContainer 
        { 
            background-color:#e0e0e0;
            height: 14px; 
            width: 256px; 
            float: left;
            margin-left: 0px;
        }

        #progressbar {background-color: #1384bb; height:14px; width:0%; }

            </style>
    </head>
<body>
            <audio class ="audio-player"  name= "audio-player" src="04-zedd-stars_come_out_(terravita_remix).ogg" >
                <p>Sorry your file doesn't support html5</p>
            </audio>
            <!--Second Track For Testing Purposes-->
            <audio  class ="audio-player" name= "audio-player" src="01-hard_rock_sofa-quasar.mp3" ></audio>

            <div id="message"></div>
                <div id = "playerContainer">

                    <ul id =  "playerControls" >
                        <li id = "prev-bt"></li>
                        <li id= "play-bt"></li>
                        <li id= "pause-bt"></li> 
                        <li id = "next-bt"></li>
                        <li id= "stop-bt" ></li>
                        <li><span id ="timecode"></span></li>

                    </ul>
                        <div id="progressContainer"><!-- Progess bars container //-->
                            <div id="progressbar"></div>
                        </div>
                </div>

            </div>



    </body>
</html>

如何单击进度条的某个部分，以便可以将其移动到轨迹中的不同时间？我不知道我该怎么做。有什么想法吗？

jquery

html

audio

javascript

回答 4

Stack Overflow用户

回答已采纳

发布于 2015-09-27 12:23:39

给定一些如下所示的html：

<div class="container">
    <video class="video">
        <source></source>
    </video>
    <progress min="0" max="100" value="0"></progress>
    <div class="controls"></div>
</div>

为了寻找视频中作为点击事件的结果的特定时间，js将如下所示：

var player = document.querySelector("video");
var progressBar = document.querySelector("progress");
progressBar.addEventListener("click", seek);

function seek(e) {
    var percent = e.offsetX / this.offsetWidth;
    player.currentTime = percent * player.duration;
    progressBar.value = percent / 100;
}

然而，这并没有解决如何在点击/拖动时进行搜索(就像大多数视频播放器一样)。包括脚本

票数 18

Stack Overflow用户

发布于 2015-04-09 02:24:07

我今天遇到了这个问题，因为我正在创建一个自定义的HTML5视频播放器，也有同样的问题。只是关于视频而不是音频。不过，这个过程应该是一样的。

我找到了这篇文章，并能够将它的进度条部分整合到我的播放器中。https://msdn.microsoft.com/en-us/library/ie/gg589528%28v=vs.85%29.aspx?f=255&MSPPError=-2147217396

这里的诀窍是使用画布元素，而不是像我所做的那样使用progressbar元素，或者像您所做的那样使用div元素。

<canvas id='progress-bar' width="200" height="20" style="border:1px solid green;">canvas not supported</canvas>

然后在您的JavaScript中，创建一个句柄，通过以下方式引用它

var mediaPlayer;
var progressBar;
var canvas;

加载文档时，初始化所有内容，包括进度栏项目

mediaPlayer = document.getElementById('media-video');
progressBar = document.getElementById('progress-bar');
canvas = document.getElementById('progress-bar');

canvas.addEventListener("click", function(e) {

    var canvas = document.getElementById('progress-bar');

    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
        mediaPlayer.currentTime = mediaPlayer.duration * (e.offsetX / canvas.clientWidth);
    }
    catch (err) {
    // Fail silently but show in F12 developer tools console
        if (window.console && console.error("Error:" + err));
    }
}, true);

mediaPlayer.addEventListener('timeupdate', updateProgressBar, false);

然后，在初始化函数之外创建一个函数，以便timeupdate侦听器调用并自动更新进度条

function updateProgressBar() {        
    mediaPlayer = document.getElementById('media-video');
    //get current time in seconds
    var elapsedTime = Math.round(mediaPlayer.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 / mediaPlayer.duration) * (canvas.clientWidth);
        if (fWidth > 0) {
            ctx.fillRect(0, 0, fWidth, canvas.clientHeight);
        }
    }
}

我还没有完全清理干净。因此，冗余的句柄指向相同的id。但我相信你已经明白了。

票数 2

Stack Overflow用户

发布于 2016-07-04 09:54:36

希望这能节省一些人的时间。如果你试图在一个Angular应用程序中设置它，你会注意到this是你的控制器上下文。因此，您需要使用e.srcElement.clientWidth才能正常工作。

vm.setPosition = function(e){

  var percent = ((e.offsetX / e.srcElement.clientWidth));

  vm.songObject.setProgress(percent);
}

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/11706177

复制

相似问题

问HTML5音频单击进度条可移动到不同的时间
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML5音频单击进度条可移动到不同的时间EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML5音频单击进度条可移动到不同的时间
EN