如何将我的附加按钮添加到这个jQuery mp3播放器中

How do I add my additional button to this jQuery mp3 player?

本文关键字：jQuery mp3 播放器 添加 我的 按钮      更新时间：2024-04-21

我想添加一个按钮，让用户在mp3播放器中听歌时后退30秒，但我做不到。我已经玩了几个小时了，下面是我使用的方法http://tympanus.net/codrops/2012/12/04/responsive-touch-friendly-audio-player.我已经有了

30秒后的代码

    // 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;
});

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。真的，我没有任何想法，我真的需要这个功能，最主要的问题是创建按钮。谢谢你们的回复。

您需要绑定timeupdate事件

示例 

var audio = $('audio');
    audio.on('timeupdate',function() {
        var time = Math.floor(this.currentTime);
        if (time > 5) {
            this.currentTime = 0;
        }
    });
相关文章：