如何将附加按钮添加到此jQuery mp3播放器？

我想添加按钮，让用户在MP3播放器中收听歌曲时回退30秒，但是我不能这样做。我正在玩这个好几个小时，这是我用的http://tympanus.net/codrops/2012/12/04/responsive-touch-friendly-audio-player。我已经得到已经如何将附加按钮添加到此jQuery mp3播放器？

代码为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; 
    }

CSS和这款MP3播放器的JS文件的其余都是在这里http://tympanus.net/Development/AudioPlayer/AudioPlayer.zip 。真的，我没有任何想法，我真的需要这个功能，最大的问题是创建一个按钮。谢谢你们的回应。

来源

2015-02-24 tom

见'audioplayer.js'，创建那里的HTML ..看到行'thePlayer.append'。。你可以在那里添加你的html – Amitd 2015-02-24 18:44:27

您需要的timeupdate事件绑定

例

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

来源

2015-02-24 18:43:30 slashsharp

如何将附加按钮添加到此jQuery mp3播放器？

回答

相关问题