关于如何在播放器中为下一个/上一个添加自定义控件的想法?

问题描述 投票:0回答:1

我想添加上一个/下一个曲目按钮(btnNext / btnPrev)在播放按钮的左侧灰色播放器内。我仍然不知道要在Js或CSS代码中做什么才能使其正常工作。

我尝试添加自定义控件,但未列出上一曲目和下一曲目

[
   'play-large', // The large play button in the center
   'restart', // Restart playback
   'rewind', // Rewind by the seek time (default 10 seconds)
   'play', // Play/pause playback
   'fast-forward', // Fast forward by the seek time (default 10 seconds)
   'progress', // The progress bar and scrubber for playback and buffering
   'current-time', // The current time of playback
   'duration', // The full duration of the media
   'mute', // Toggle mute
   'volume', // Volume control
   'captions', // Toggle captions
   'settings', // Settings menu
   'pip', // Picture-in-picture (currently Safari only)
   'airplay', // Airplay (currently Safari only)
   'download', // Show a download button with a link to either the current source or a custom URL you specify in your options
   'fullscreen', // Toggle fullscreen
];

Like in classic audio player

请看我的朋友:<< [http://jsfiddle.net/CAT999/1oL6w5jm/23/] >>对改善我的代码有帮助吗?

注意:此音频播放器具有通过JSON数据和步骤导航支持播放列表的功能。您现在看到的版本是此项目的全新内容...通过更新样式并将所有浏览器检测废话卸载到名为Plyr(https://github.com/sampotts/plyr)的出色音频播放器插件中。

jQuery(function ($) { 'use strict' var supportsAudio = !!document.createElement('audio').canPlayType; if (supportsAudio) { // initialize plyr var player = new Plyr('#audio1', { controls: [ 'restart', 'play', 'progress', 'current-time', 'duration', 'mute', 'volume', 'download' ] }); // initialize playlist and controls var index = 0, playing = false, mediaPath = 'https://archive.org/download/mythium/', extension = '', tracks = [{ "track": 1, "name": "All This Is - Joe L.'s Studio", "duration": "2:46", "file": "JLS_ATI" }, { "track": 2, "name": "The Forsaken - Broadwing Studio (Final Mix)", "duration": "8:30", "file": "BS_TF" }, { "track": 3, "name": "All The King's Men - Broadwing Studio (Final Mix)", "duration": "5:01", "file": "BS_ATKM" }, { "track": 4, "name": "The Forsaken - Broadwing Studio (First Mix)", "duration": "8:31", "file": "BSFM_TF" }, { "track": 5, "name": "All The King's Men - Broadwing Studio (First Mix)", "duration": "5:05", "file": "BSFM_ATKM" }, { "track": 6, "name": "All This Is - Alternate Cuts", "duration": "2:48", "file": "AC_ATI" }, { "track": 7, "name": "All The King's Men (Take 1) - Alternate Cuts", "duration": "5:44", "file": "AC_ATKMTake_1" }, { "track": 8, "name": "All The King's Men (Take 2) - Alternate Cuts", "duration": "5:26", "file": "AC_ATKMTake_2" }, { "track": 9, "name": "Magus - Alternate Cuts", "duration": "5:46", "file": "AC_M" }, { "track": 10, "name": "The State Of Wearing Address (fucked up) - Alternate Cuts", "duration": "5:25", "file": "AC_TSOWAfucked_up" }, { "track": 11, "name": "Magus - Popeye's (New Years '04 - '05)", "duration": "5:53", "file": "PNY04-05_M" }, { "track": 12, "name": "On The Waterfront - Popeye's (New Years '04 - '05)", "duration": "4:40", "file": "PNY04-05_OTW" }, { "track": 13, "name": "Trance - Popeye's (New Years '04 - '05)", "duration": "13:15", "file": "PNY04-05_T" }, { "track": 14, "name": "The Forsaken - Popeye's (New Years '04 - '05)", "duration": "8:12", "file": "PNY04-05_TF" }, { "track": 15, "name": "The State Of Wearing Address - Popeye's (New Years '04 - '05)", "duration": "7:02", "file": "PNY04-05_TSOWA" }, { "track": 16, "name": "Magus - Popeye's (Valentine's Day '05)", "duration": "5:43", "file": "PVD_M" }, { "track": 17, "name": "Trance - Popeye's (Valentine's Day '05)", "duration": "10:45", "file": "PVD_T" }, { "track": 18, "name": "The State Of Wearing Address - Popeye's (Valentine's Day '05)", "duration": "5:36", "file": "PVD_TSOWA" }, { "track": 19, "name": "All This Is - Smith St. Basement (01/08/04)", "duration": "2:48", "file": "SSB01_08_04_ATI" }, { "track": 20, "name": "Magus - Smith St. Basement (01/08/04)", "duration": "5:46", "file": "SSB01_08_04_M" }, { "track": 21, "name": "Beneath The Painted Eye - Smith St. Basement (06/06/03)", "duration": "13:07", "file": "SSB06_06_03_BTPE" }, { "track": 22, "name": "Innocence - Smith St. Basement (06/06/03)", "duration": "5:16", "file": "SSB06_06_03_I" }, { "track": 23, "name": "Magus - Smith St. Basement (06/06/03)", "duration": "5:46", "file": "SSB06_06_03_M" }, { "track": 24, "name": "Madness Explored - Smith St. Basement (06/06/03)", "duration": "4:51", "file": "SSB06_06_03_ME" }, { "track": 25, "name": "The Forsaken - Smith St. Basement (06/06/03)", "duration": "8:43", "file": "SSB06_06_03_TF" }, { "track": 26, "name": "All This Is - Smith St. Basement (12/28/03)", "duration": "3:00", "file": "SSB12_28_03_ATI" }, { "track": 27, "name": "Magus - Smith St. Basement (12/28/03)", "duration": "6:09", "file": "SSB12_28_03_M" }, { "track": 28, "name": "Madness Explored - Smith St. Basement (12/28/03)", "duration": "5:05", "file": "SSB12_28_03_ME" }, { "track": 29, "name": "Trance - Smith St. Basement (12/28/03)", "duration": "12:32", "file": "SSB12_28_03_T" }, { "track": 30, "name": "The Forsaken - Smith St. Basement (12/28/03)", "duration": "8:56", "file": "SSB12_28_03_TF" }, { "track": 31, "name": "All This Is (Take 1) - Smith St. Basement (Nov. '03)", "duration": "4:55", "file": "SSB___11_03_ATITake_1" }, { "track": 32, "name": "All This Is (Take 2) - Smith St. Basement (Nov. '03)", "duration": "5:45", "file": "SSB___11_03_ATITake_2" }, { "track": 33, "name": "Beneath The Painted Eye (Take 1) - Smith St. Basement (Nov. '03)", "duration": "14:05", "file": "SSB___11_03_BTPETake_1" }, { "track": 34, "name": "Beneath The Painted Eye (Take 2) - Smith St. Basement (Nov. '03)", "duration": "13:25", "file": "SSB___11_03_BTPETake_2" }, { "track": 35, "name": "The Forsaken (Take 1) - Smith St. Basement (Nov. '03)", "duration": "8:37", "file": "SSB___11_03_TFTake_1" }, { "track": 36, "name": "The Forsaken (Take 2) - Smith St. Basement (Nov. '03)", "duration": "8:36", "file": "SSB___11_03_TFTake_2" }], buildPlaylist = $.each(tracks, function(key, value) { var trackNumber = value.track, trackName = value.name, trackDuration = value.duration; if (trackNumber.toString().length === 1) { trackNumber = '0' + trackNumber; } $('#plList').append('<li> \ <div class="plItem"> \ <span class="plNum">' + trackNumber + '.</span> \ <span class="plTitle">' + trackName + '</span> \ <span class="plLength">' + trackDuration + '</span> \ </div> \ </li>'); }), trackCount = tracks.length, npAction = $('#npAction'), npTitle = $('#npTitle'), audio = $('#audio1').on('play', function () { playing = true; npAction.text('Now Playing...'); }).on('pause', function () { playing = false; npAction.text('Paused...'); }).on('ended', function () { npAction.text('Paused...'); if ((index + 1) < trackCount) { index++; loadTrack(index); audio.play(); } else { audio.pause(); index = 0; loadTrack(index); } }).get(0), btnPrev = $('#btnPrev').on('click', function () { if ((index - 1) > -1) { index--; loadTrack(index); if (playing) { audio.play(); } } else { audio.pause(); index = 0; loadTrack(index); } }), btnNext = $('#btnNext').on('click', function () { if ((index + 1) < trackCount) { index++; loadTrack(index); if (playing) { audio.play(); } } else { audio.pause(); index = 0; loadTrack(index); } }), li = $('#plList li').on('click', function () { var id = parseInt($(this).index()); if (id !== index) { playTrack(id); } }), loadTrack = function (id) { $('.plSel').removeClass('plSel'); $('#plList li:eq(' + id + ')').addClass('plSel'); npTitle.text(tracks[id].name); index = id; audio.src = mediaPath + tracks[id].file + extension; updateDownload(id, audio.src); }, updateDownload = function (id, source) { player.on('loadedmetadata', function () { $('a[data-plyr="download"]').attr('href', source); }); }, playTrack = function (id) { loadTrack(id); audio.play(); }; extension = audio.canPlayType('audio/mpeg') ? '.mp3' : audio.canPlayType('audio/ogg') ? '.ogg' : ''; loadTrack(index); } else { // no audio support $('.column').addClass('hidden'); var noSupport = $('#audio1').text(); $('.container').append('<p class="no-support">' + noSupport + '</p>'); } });

/* Album thumbnail should display here when track is playing
================================================== */
.flex-container {
    width:70vh;
    //pointer-events:none;
  display:block;
    top:50%;
    left:50%;
    z-index:999999999999;
    position:fixed;
    transform:translateX(-50%) translateY(-50%);
    //background:black;
}

.track-thumbnails img {
  //transform: rotate(5deg);
  width: 40vh;
  display: block;
  -webkit-box-shadow: 0px 0px 14px 1px rgba(0,0,0,0.56); 
  box-shadow: 0px 0px 14px 1px rgba(0,0,0,0.56);

}

/* Font Family
================================================== */

@import url('https://fonts.googleapis.com/css?family=Oxygen:300,400,700');


/* Global Styles
================================================== */

html,body {
-webkit-font-smoothing:antialiased;
-webkit-text-size-adjust:100%;
background-color:#0665a2;
color:#fff;
font-size:1rem;
font-family:"Oxygen", HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight:400;
letter-spacing:.025rem;
line-height:1.618;
padding:1rem 0;
}

*,::before,::after {
box-sizing:border-box;
}

* {
-webkit-tap-highlight-color:rgba(0,0,0,0);
-webkit-tap-highlight-color:transparent;
}


/* Setup
================================================== */

.container { position:relative; margin:0 auto; max-width:800px; width:100%; }
.column { width:inherit; }


/* Typography / Links
================================================== */

p { color:#fff; display:block; font-size:.9rem; font-weight:400; margin:0 0 2px; }

a,a:visited { color:#8cc3e6; outline:0; text-decoration:underline; }
a:hover,a:focus { color:#bbdef5; }
p a,p a:visited { line-height:inherit; }


/* Misc.
================================================== */

.add-bottom { margin-bottom:2rem !important; }
.left { float:left; }
.right { float:right; }
.center { text-align:center; }
.hidden { display:none; }

.no-support {
margin:2rem auto;
text-align:center;
width:90%;
}


/* Audio Player Styles
================================================== */

audio {
display:none;
}

#audiowrap,
#plwrap {
margin:0 auto;
}

#tracks {
font-size:0;
position:relative;
text-align:center;
}

#nowPlay {
display:block;
font-size:0;
}

#nowPlay span {
display:inline-block;
font-size:1.05rem;
vertical-align:top;
}

#nowPlay span#npAction {
padding:21px;
width:30%;
}

#nowPlay span#npTitle {
padding:21px;
text-align:right;
width:70%;
}

#plList li {
cursor:pointer;
display:block;
margin:0;
padding:21px 0;
}

#plList li:hover {
background-color:rgba(0,0,0,.1);
}

.plItem {
position:relative;
}

.plTitle {
left:50px;
overflow:hidden;
position:absolute;
right:65px;
text-overflow:ellipsis;
top:0;
white-space:nowrap;
}

.plNum {
padding-left:21px;
width:25px;
}

.plLength {
padding-left:21px;
position:absolute;
right:21px;
top:0;
}

.plSel,
.plSel:hover {
background-color:rgba(0,0,0,.1);
color:#fff;
cursor:default !important;
}

#tracks a {
border-radius:3px;
color:#fff;
cursor:pointer;
display:inline-block;
font-size:2.3rem;
height:35px;
line-height:.175;
margin:0 5px 30px;
padding:10px 15px;
text-decoration:none;
transition:background .3s ease;
}

#tracks a:last-child {
margin-left:0;
}

#tracks a:hover,
#tracks a:active {
background-color:rgba(0,0,0,.1);
color:#fff;
}

#tracks a::-moz-focus-inner {
border:0;
padding:0;
}


/* Plyr Overrides
================================================== */

.plyr--audio .plyr__controls {
background-color:transparent;
border:none;
color:#fff;
padding:20px 20px 20px 13px;
width:100%;
}

a.plyr__controls__item.plyr__control:hover,
.plyr--audio .plyr__controls button:hover,
.plyr--audio .plyr__controls button.tab-focus:focus,
.plyr__play-large {
background-color:rgba(0,0,0,.1);
}

.plyr__progress--played,
.plyr__volume--display {
color:rgba(0,0,0,.1);
}

.plyr--audio .plyr__progress--buffer,
.plyr--audio .plyr__volume--display {
background:rgba(0,0,0,.1);
}

.plyr--audio .plyr__progress--buffer {
color:rgba(0,0,0,.1);
}


/* Media Queries
================================================== */

@media only screen and (max-width:600px) {
    #nowPlay span#npAction { display:none; }
    #nowPlay span#npTitle { display:block; text-align:center; width:100%; }
}

<html>
<head>
    <meta charset=utf-8>
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <link rel="stylesheet" href="https://cdn.plyr.io/3.5.6/plyr.css">





<div class="container">
    <div class="column add-bottom">
        <div id="mainwrap">
            <div id="nowPlay">
                <span id="npAction">Paused...</span><span id="npTitle"></span>
            </div>
            <div id="audiowrap">
                <div id="audio0">
                    <audio id="audio1" preload controls>Your browser does not support HTML5 Audio! 😢</audio>
                </div>
                <div id="tracks">




<div class="flex-container"><div class="track-thumbnails">
      <img src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22348%22%20height%3D%22225%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20348%20225%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_171d59a550b%20text%20%7B%20fill%3A%23eceeef%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A17pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_171d59a550b%22%3E%3Crect%20width%3D%22348%22%20height%3D%22225%22%20fill%3D%22%2355595c%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22116.7109375%22%20y%3D%22120.15%22%3EThumbnail%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E">
</div></div>






                    <a id="btnPrev">&vltri;</a><a id="btnNext">&vrtri;</a>
                </div>
            </div>
            <div id="plwrap">
                <ul id="plList"></ul>
            </div>
        </div>
    </div>
    <div class="column add-bottom center">
        <p>Music by <a href="http://www.mythium.net/">Mythium</a></p>
        <p>Download: <a href="https://archive.org/download/mythium/mythium_vbr_mp3.zip">zip</a> / <a href="https://archive.org/download/mythium/mythium_archive.torrent">torrent</a></p>
    </div>
</div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html5media/1.1.8/html5media.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.5.6/plyr.min.js"></script>



我想在播放按钮左侧的灰色播放器中添加上一个/下一个曲目按钮(btnNext / btnPrev)。我仍然不知道在Js或CSS代码中要做什么... ...>
javascript jquery json
1个回答
0
投票
我认为您可能希望使用HTML自定义控件来绘制播放器。可以使用建议的自定义控件方式,而不是放置预制属性数组。像:

const controls = ` <div class="plyr__controls"> <button type="button" class="plyr__control" data-plyr="restart"> <svg role="presentation"><use xlink:href="#plyr-restart"></use></svg> <span class="plyr__tooltip" role="tooltip">Restart</span> </button> <button type="button" class="plyr__control" data-plyr="rewind"> <svg role="presentation"><use xlink:href="#plyr-rewind"></use></svg> <span class="plyr__tooltip" role="tooltip">Rewind {seektime} secs</span> </button> <button type="button" class="plyr__control" aria-label="Play, {title}" data-plyr="play"> <svg class="icon--pressed" role="presentation"><use xlink:href="#plyr-pause"></use></svg> <svg class="icon--not-pressed" role="presentation"><use xlink:href="#plyr-play"></use></svg> <span class="label--pressed plyr__tooltip" role="tooltip">Pause</span> <span class="label--not-pressed plyr__tooltip" role="tooltip">Play</span> </button> <button type="button" class="plyr__control" data-plyr="fast-forward"> <svg role="presentation"><use xlink:href="#plyr-fast-forward"></use></svg> <span class="plyr__tooltip" role="tooltip">Forward {seektime} secs</span> </button> <div class="plyr__progress"> <input data-plyr="seek" type="range" min="0" max="100" step="0.01" value="0" aria-label="Seek"> <progress class="plyr__progress__buffer" min="0" max="100" value="0">% buffered</progress> <span role="tooltip" class="plyr__tooltip">00:00</span> </div> <div class="plyr__time plyr__time--current" aria-label="Current time">00:00</div> <div class="plyr__time plyr__time--duration" aria-label="Duration">00:00</div> <button type="button" class="plyr__control" aria-label="Mute" data-plyr="mute"> <svg class="icon--pressed" role="presentation"><use xlink:href="#plyr-muted"></use></svg> <svg class="icon--not-pressed" role="presentation"><use xlink:href="#plyr-volume"></use></svg> <span class="label--pressed plyr__tooltip" role="tooltip">Unmute</span> <span class="label--not-pressed plyr__tooltip" role="tooltip">Mute</span> </button> <div class="plyr__volume"> <input data-plyr="volume" type="range" min="0" max="1" step="0.05" value="1" autocomplete="off" aria-label="Volume"> </div> <button type="button" class="plyr__control" data-plyr="captions"> <svg class="icon--pressed" role="presentation"><use xlink:href="#plyr-captions-on"></use></svg> <svg class="icon--not-pressed" role="presentation"><use xlink:href="#plyr-captions-off"></use></svg> <span class="label--pressed plyr__tooltip" role="tooltip">Disable captions</span> <span class="label--not-pressed plyr__tooltip" role="tooltip">Enable captions</span> </button> <button type="button" class="plyr__control" data-plyr="fullscreen"> <svg class="icon--pressed" role="presentation"><use xlink:href="#plyr-exit-fullscreen"></use></svg> <svg class="icon--not-pressed" role="presentation"><use xlink:href="#plyr-enter-fullscreen"></use></svg> <span class="label--pressed plyr__tooltip" role="tooltip">Exit fullscreen</span> <span class="label--not-pressed plyr__tooltip" role="tooltip">Enter fullscreen</span> </button> </div> `; var player = new Plyr('#audio1', { controls });

热门问题
推荐问题
最新问题