使用javascript更改媒体播放器的图标字体？

Question

I am trying to develop a very minimal audio player with just a play/pause button and a mute/unmute button.

I want to use Font-Awesome to display icons for play/pause and mute/unmute.

I have created a fiddle where I have put my code. http://jsfiddle.net/EsC6L/

I am getting an error "Uncaught SyntaxError: Unexpected Identifier"

The console is identifying the syntax in the innerHTML as incorrect.

btnPlayPause.addEventListener("click", function() {
    if (myAudio.paused) {
        myAudio.play();
        btnPlayPause.innerHTML = "<i class="icon-pause"></i>";
    }
    else {
        myAudio.pause();
        btnPlayPause.innerHTML = "<i class="icon-play"></i>";
    }
});

btnPlayPause is deined as a var, as is myAudio.

on the HTML side, I have the following

    <div class="controls">
        <button id="btnPlayPause">Play</button>
        <button id="btnMute">Mute</button>
    </div><!-- /controls -->

I am stumped as to how to solve this.

Answer 1

String needs escaping:

btnPlayPause.innerHTML = "<i class=\"icon-pause\"></i>";

Demo: http://jsfiddle.net/EsC6L/2/