HTML5 音频单击进度条可移动到其他时间

HTML5 audio clicking the progress bar to move to a different time

本文关键字：可移动 其他 时间 音频 单击 HTML5      更新时间：2024-04-02
<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>

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

给定一些看起来像这样的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;
}

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

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

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

这里的诀窍不是像我那样使用 progressbar 元素，也不是像你那样使用 div 元素，而是改用 canvas 元素。

<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。但我相信你明白了。

希望这可以为某人节省一些时间。 如果您尝试在 Angular 应用程序中进行设置，您会注意到控制器上下文this。 因此，您需要使用e.srcElement.clientWidth才能正常工作。

vm.setPosition = function(e){
  var percent = ((e.offsetX / e.srcElement.clientWidth));
  vm.songObject.setProgress(percent);
}

我在使用 HTML5 多媒体组件 – 第 3 部分：自定义控件中写过，向下滚动到"添加进度条"。

相关文章：