jQuery HTML5 audio player plugin problem

[light742]

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:

@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; 
}

The coding for the script06.html file is:

<!DOCTYPE html>
<html>
<head>
	<title>Audio player</title>
	<link rel="stylesheet" href="script06.css"/>
	<script src="[URL unfurl="true"]http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>[/URL] 
	<script src="mbPlayer/jquery.mb.miniPlayer.js"></script>
	<script src="mbPlayer/jquery.jplayer.min.js"></script>
	<script src="script06.js"></script>
</head>
<body>
	<h2>jQuery HTML5 audio player</h2>
	<div>
    	<a class="audio {ogg:'mbPlayer/Rhapsody_in_Blue.ogg'}" href="mbPlayer/Rhapsody_in_Blue.mp3">Rhapsody in Blue</a>
	</div>
</body>
</html>

And the code for the script06.js file is:

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

I would appreciate the help!!!

 

[vacunita]

The smiley face should not be there of course. You should have the real name of the font being embedded. I;m not familiar with the font so can;t say for sure what its actual name is but it appears to be "mbaudio.font"



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[feherke]

Hi

The smiley face should not be there of course.

It has its role. See the explanation in Paul Irish's Bulletproof @font-face syntax article.

Feherke.

 

[vacunita]

Ahh, interesting, didn't know about that. Though I haven't delved too much into embedding fonts.

I'll have to look a little deeper into it. Thanks Feherke.

@light742:
With that said, then it seems the code is correct. What sort of problem are you having then?



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[light742]

Hello:

I uploaded the three files to my website that is being used only as a test site, not to sell or advertise for anything. When you go to

http://www.cheapcostdiamonds.com/script06.html,

you will only get the h2 heading tag that reads "jQuery HTML5 audio player," and doesn't have any controls showing to click on. Please help.

 

[vacunita]

I get an error in Firefox's Javascript Error console:

Error: $(".audio").mb_miniPlayer is not a function
Source File:

http://www.cheapcostdiamonds.com/script06.js

Line: 6

That probably stems from the fact that neither MBplayer js file is where you are telling the page that they are.

Attempting to open the JS files leads to a "The page you tried to access does not exist on this server" error page. Which leads me to believe you haven't uploaded the files to the mbPlayer folder if it even exists. I can't access the folder to confirm this though, so it may either be protected or not there at all.



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[light742]

I figured it out!

I created an incorrect folder at the server. Once I corrected it, the Webpage worked correctly.

The author states a tip on page 424 that is not helpful at all. They state that

http://jquery.pupunzi.com

will be a source of help.

The author's website at

http://www.javascriptworld.com

should have uploaded 4 more files. I found and downloaded these four files by going to the following locations:

---------------------------------------------------------

http://4e20.net/play/jquery.mb.miniAudioPlayer.1.2/inc/

I downloaded the following 2 files from this website:

jquery.jplayer.min.js

and

jquery.mb.miniPlayer.js

http://www.4shared.com/get/9W1rmdtX/01-Rhapsody_in_Blue.html

downloaded the Rhapsody in Blue file and named it:

Rhapsody_in_Blue.mp3

http://www.archive.org/details/DefianceOhioTheFearTheFearTheFear/

downloaded an arbitrary ogg file and named it:

Rhapsody_in_Blue.ogg


Thank you vacunita very much!!!