javascript - 多个音量和进度控制 JavaScript

Question

我有一个包含多个音轨的页面，如下所示: http://jsfiddle.net/24eLsv6r/2/

问题是音量和进度控件仅附加到第一个音频。我尝试用以下方法来养育他们:

$vol = $('volume', $(this).parent())[0];

还有

$bar = $('progressbar', $(this).parent())[0];

但它仍然不起作用。

有人有想法吗？

Answer 1

您需要使用 jQuery.each() 遍历每个音频。在这种情况下，您可以独立获取和设置控件。

我添加 ID 只是为了证明解决方案。 (卷 1、程序 1...)

我提出了一个可以帮助您的解决方案。 CSS3 有效。

HTML

<div class="player">
    <audio class="audio" src="https://upload.wikimedia.org/wikipedia/commons/7/79/Common_Pauraque_VOL_11-05_Dudley_T._Dougherty_Natural_Sounds_Collection.ogg" loop>
        <p>Your browser does not support the audio element</p>
    </audio>
    <div class="playpause"></div>
    <div id="volume0" class="volume"></div>
    <br>
    <div id="prog0" class="progressbar"></div>
    <br>
</div>
<div class="player">
    <audio class="audio" src="https://upload.wikimedia.org/wikipedia/commons/7/79/Common_Pauraque_VOL_11-05_Dudley_T._Dougherty_Natural_Sounds_Collection.ogg" loop>
        <p>Your browser does not support the audio element</p>
    </audio>
    <div class="playpause"></div>
    <div id="volume1" class="volume"></div>
    <br>
    <div id="prog1" class="progressbar"></div>
    <br>
</div>
<div class="player">
    <audio class="audio" src="https://upload.wikimedia.org/wikipedia/commons/7/79/Common_Pauraque_VOL_11-05_Dudley_T._Dougherty_Natural_Sounds_Collection.ogg" loop>
        <p>Your browser does not support the audio element</p>
    </audio>
    <div class="playpause"></div>
    <div id="volume2" class="volume"></div>
    <br>
    <div id="prog2" class="progressbar"></div>
    <br>
</div>

CSS

    .player {
        position: relative;
        margin: 50px auto;
        text-align: center;
        width: 300px;
    }
    .playpause {
        background: url(https://upload.wikimedia.org/wikipedia/commons/b/b8/WikiWidgetPlayButton.png) no-repeat center;
        border: 1px solid grey;
        border-radius: 7px;
        cursor: pointer;
        font-size: 12px;
        margin-bottom: 15px;
        padding: 12px 0;
    }
    .playpause:hover {
        border-color: #ccc;
    }
    .playing {
        background: url(http://www.pokeroffice.com/img/manual/pause.gif) no-repeat center;
    }
    .volume, .progressbar {
        border: none;
        height: 2px;
    }
    .volume {
        background: hsla(120, 55%, 50%, 1);
        color: inherit;
    }
    .progressbar {
        background: grey;
        color: inherit;
    }
    .ui-slider-handle {
        border-radius: 50% !important;
        height: 11px !important;
        margin-left: -5px !important;
        top: -5px !important;
        width: 15px !important;
    }

Javascript

$(function () {
    var $aud = $(".audio"),
        $pp = $(".playpause");

    $aud.each(function (i, audio) {
        var $bar = $("#prog" + i);
        var $vol = $("#volume" + i);
        var AUDIO = $aud[i];

        AUDIO.volume = 0.15;
        AUDIO.addEventListener("timeupdate", function () {

            $bar.slider("value", ~~ (100 / AUDIO.duration * AUDIO.currentTime));
        }, false);

        $vol.slider({
            value: AUDIO.volume * 100,
            slide: function (ev, ui) {
                $vol.css({
                    background: "hsla(180," + ui.value + "%,50%,1)"
                });
                AUDIO.volume = ui.value / 100;
            }
        });

        $bar.slider({
            value: AUDIO.currentTime,
            slide: function (ev, ui) {
                AUDIO.currentTime = AUDIO.duration / 100 * ui.value;
            }
        });
    });

    $pp.click(function () {
        $aud = $("audio", $(this).parent())[0];
        if ($aud.paused) {
            $(this).addClass("playing");
            $aud.play();
        } else {
            $(this).removeClass("playing");
            $aud.pause();
        }
    });
});

Demo