小贝子编程

替换音频播放器中的引导图标



我有一个音频播放器，它现在正在"播放"&"暂停"
现在我要替换Play(text) &暂停(文本)来引导图标。
在JSFIDDLE上查看

<audio id="yourAudio" preload='none'>
    <source src='http://freshly-ground.com/data/audio/mpc/20090119%20-%20Untitled%20Groove.mp3' type='audio/mpeg' />
</audio>
<a href="#" id="audioControl">play!</a>

JS 

var yourAudio = document.getElementById('yourAudio'),
    ctrl = document.getElementById('audioControl');
ctrl.onclick = function () {
    // Update the Button
    var pause = ctrl.innerHTML === 'pause!';
    ctrl.innerHTML = pause ? 'play!' : 'pause!';
    // Update the Audio
    var method = pause ? 'pause' : 'play';
    yourAudio[method]();
    // Prevent Default Action
    return false;
};

要使用引导图标，请添加此链接。

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
HTML

 <audio id="yourAudio" preload='none'>
        <source src='http://freshly-ground.com/data/audio/mpc/20090119%20-%20Untitled%20Groove.mp3' type='audio/mpeg' />
    </audio>
    <a href="#"  ><span id="audioControl" class="glyphicon glyphicon-play-circle"></span></a>

JS 

var yourAudio = document.getElementById('yourAudio'),
    ctrl = document.getElementById('audioControl');
ctrl.onclick = function () {

if(ctrl.className == "glyphicon glyphicon-play-circle") {
        ctrl.className="glyphicon glyphicon-pause";
       yourAudio["play"]();
}
else if (ctrl.className == "glyphicon glyphicon-pause"){
     ctrl.className="glyphicon glyphicon-play-circle";
    yourAudio["pause"]();
}
};

小提琴:http://jsfiddle.net/8dzd6bh4/2/

简单的方法是使用Bootstrap的象形符号。您可以执行以下操作:

<a href="#" id="audioControl"><span class="glyphicon glyphicon-play"></span></a>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium