Question

我想添加一个按钮，让用户在mp3播放器中收听歌曲30秒，但我无法做到这一点。我正在玩这个几个小时，这是我使用的http://tympanus.net/codrops/2012/12/04/responsive-touch-friendly-audio-player。我已经得到了什么

HTML

<head>

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:400,700" />
<link rel="stylesheet" href="../../assets/css/audioplayer.css" />
<script src="../../assets/js/jquery.js"></script>
<script src="../../assets/js/audioplayer.js"></script>

</head>

<body>
    <div class="container">
        <br><br><br><br>
        <div class="jumbotron">

            <div class="thumbnail">
                <br><br><br><br>
                <h2 style="text-align: center;">You are listening mp3 number 1</h2>
                <br><br><br><br>
                <div id="wrapper">


                <audio preload="auto" controls>
                    <source src="../../assets/media/audio/BlueDucks_FourFlossFiveSix.mp3">
                </audio>



                </div>

            </div>

            <div class="team">
                <a><img src="http://i57.tinypic.com/30t6gd2.jpg"</a>
            </div>

            <div class="team" style="float: right;">
                <a><img src="http://i61.tinypic.com/29zv7u8.png"</a>
            </div>
        </div>
    </div>


    <script>$( function() { $( 'audio' ).audioPlayer(); } );</script>
    <script>
                /*
                    VIEWPORT BUG FIX
                    iOS viewport scaling bug fix, by @mathias, @cheeaun and @jdalton
                */
                (function(doc){var addEvent='addEventListener',type='gesturestart',qsa='querySelectorAll',scales=[1,1],meta=qsa in doc?doc[qsa]('meta[name=viewport]'):[];function fix(){meta.content='width=device-width,minimum-scale='+scales[0]+',maximum-scale='+scales[1];doc.removeEventListener(type,fix,true);}if((meta=meta[meta.length-1])&&addEvent in doc){fix();scales=[.25,1.6];doc[addEvent](type,fix,true);}}(document));
     </script>

</body>

CSS

.audioplayer-back30s
{
    width: 2.5em; /* 40 */
    height: 100%;
    text-align: left;
    text-indent: -9999px;
    cursor: pointer;
    z-index: 2;
    top: 0;
    left: 0;
}
    .audioplayer-back30s:hover,
    .audioplayer-back30s:focus
    {
        background-color: #222;
    }


.audioplayer-back30s a
    {
        display: block;
    }

此mp3播放器的其余css和js文件位于http://tympanus.net/Development/AudioPlayer/AudioPlayer.zip。真的，我没有任何想法，我真的需要这个功能，谢谢你们的帮助。

Answer 1

您可以设置audio-element的 currentTime 属性：

// jump 30 seconds back when we click the button    
$('.audioplayer-back30s').click(function(){
    var audio = $('audio');
    var backToSec = audio.currentTime - 30;
    // make sure that we jump to a valid point in time
    audio.currentTime = (backToSec >= 0) ? backToSec : 0;
});

如何在此jQuery mp3播放器中添加额外的30秒后退按钮？

1 个答案: