Bootstrap 音频播放器中的图标替换

Question

我有一个音频播放器，现在正在 "PLAY" & "PAUSE"
现在我想将这个 Play(text) & Pause(text) 替换为 bootstrap 图标。
在 JSFIDDLE

上查看

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="#" 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;
};

Answer 1

最简单的方法是使用Bootstrap's glyphicons。您可以执行以下操作：

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

Answer 2

要使用 bootstrap 图标，请添加此 link。

<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"]();

}
};

Fiddle:http://jsfiddle.net/8dzd6bh4/2/

Bootstrap 音频播放器中的图标替换

Bootstrap icon replace in audio player

javascript

css

icons

html5-audio

twitter-bootstrap