Hello:I'm having a problem with trying "to use a jQuery plugin to implement a full-featured audio player that takes advantage of the HTML5 audio tag, with a Flash fallback for browsers that don't support HTML5." This is from page 420 of the book "JavaScript Visual Quickstart Guide, Eighth Edition" by Tom Negrino and Dori Smith. There are three file involved:

script06.html

script06.css

script06.js

There is a possible problem with the 4th line of the script06.css file, which is:src:local('☺'), url('mbPlayer/mbAudioFont/mb_audio_font.woff')I'm using Notepad My browser isIE9, and am using Vista. I don't know how the smiley face got into the code and if it's correct.The coding for the three files is:

The script06.css file is:

[text]@font-face { font-family:'mb_audio_fontRegular'; src:url('mbPlayer/mbAudioFont/mb_audio_font.eot'); src:local('☺'), url('mbPlayer/mbAudioFont/mb_audio_font.woff') format('woff'), url('mbPlayer/mbAudioFont/mb_audio_font.ttf') format('truetype'), url('mbPlayer/mbAudioFont/mb_audio_font-webfont_svg#webfontywr4YLri') format('svg'); font-weight:normal; font-style:normal; } .mbMiniPlayer span { font:16px/20px "mb_audio_fontRegular","Webdings",sans-serif; } a.audio { display:none; } .mbMiniPlayer table { -moz-border-radius:5px; -webkit-border-radius:8px; border-radius:5px; margin:5px; } .mbMiniPlayer.shadow table { border:1px solid white; -moz-box-shadow:#ccc 0px 0px 5px; -webkit-box-shadow:#ccc 0px 0px 5px; box-shadow:#ccc 0px 0px 5px; } .mbMiniPlayer.black td { margin:0; padding:0; } .jp-progress { position:relative; background-color:#fff; height:8px; margin:2px; margin-top:0; top:-2px; -moz-box-sizing: border-box; cursor:pointer; } .jp-load-bar { background-color:#e9e6e6; height:6px; -moz-box-sizing: border-box; } .jp-play-bar { background-color:black; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#7D7D7D), to(#262626), color-stop(.6,#333)); height:6px; -moz-box-sizing:border-box; } .mbMiniPlayer td.controlsBar { background-color:#ccc; background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#DEDEDE), to(#FFF), color-stop(.6,#FFF)); margin:0; padding:0; cursor:default !important; box-shadow:inset 1px 1px 2px #999; -moz-box-shadow:inset 1px 1px 3px #999; -webkit-box-shadow:inset 1px 1px 2px #999; } .mbMiniPlayer .controls { margin:1px; display:none; width:1px; border:1px solid gray; height:100%; -moz-box-sizing:border-box; overflow:hidden; white-space:nowrap; } .mbMiniPlayer span { display:inline-block; padding:3px; width:20px; height:20px; color:white; text-align:center; text-shadow:1px -1px 1px #000; background-image:-webkit-gradient(linear, 0% 5%, 85% 100%, from(transparent), to(rgba(100, 100, 100,0.5))); } .mbMiniPlayer span.title { position:relative; color:#333; font:10px/12px sans-serif; text-shadow:none !important; letter-spacing:1px; width:100%; height:8px; top:-4px; background:transparent !important; text-align:left; cursor:default !important; } .mbMiniPlayer span.rew { width:1px; cursor:pointer; } .mbMiniPlayer span.volumeLevel a { position:relative; display:inline-block; margin:0; margin-right:2px; width:2px; padding:0; background-color:white; height:0; vertical-align:bottom; opacity:.1; cursor:pointer; } .mbMiniPlayer span.volumeLevel a.sel { -moz-box-shadow:#000 0px 0px 1px; -webkit-box-shadow:#000 0px 0px 1px; box-shadow: #000 0px 0px 1px; } .mbMiniPlayer span.time { width:1px; font:11px/20px sans-serif; overflow:hidden; white-space:nowrap; cursor:default !important; text-shadow:0 0 2px #999!important; } .mbMiniPlayer span.play { -moz-border-radius:0 5px 5px 0; -webkit-border-top-right-radius:5px; -webkit-border-bottom-right-radius:5px; border-radius:0 5px 5px 0; cursor:pointer; } .mbMiniPlayer span.volume { -moz-border-radius:5px 0 0 5px; -webkit-border-top-left-radius:5px; -webkit-border-bottom-left-radius:5px; border-radius:5px 0 0 5px; cursor:pointer; } .mbMiniPlayer.black span { background-color:#666; text-shadow:1px -1px 1px #000; } .mbMiniPlayer.black span.play { border-left:1px solid #333; } .mbMiniPlayer.black span.volume { border-right:1px solid #999; } .mbMiniPlayer.black span.volume.mute { color:#999; }[/text]

The coding for the script06.html file is:

[text]<!DOCTYPE html> <html> <head><title>Audio player</title><link rel="stylesheet" href="script06.css"/><script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script><script src="mbPlayer/jquery.mb.miniPlayer.js"></script><script src="mbPlayer/jquery.jplayer.min.js"></script><script src="script06.js"></script> </head> <body>

jQuery HTML5 audio player

And the code for the script06.js file is:

[text]$(function(){ $(".audio").mb_miniPlayer({ width: 360, inLine: false, showRew: true, showTime: true });});[/text]

I would appreciate the help!!!!!