Question

我有一个音频播放器，现在正在制作＆＃34; PLAY＆＃34; ＆安培; ＆＃34; PAUSE＆＃34;
现在我想替换这个Play（文本）＆amp;暂停（文本）以引导图标。
在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图标，请添加此链接。

<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/

Answer 2

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

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

音频播放器

2 个答案: