Search jQuery

jQuery Forum

Using jQuery Plugins

dan.f.wil..

Newbie: Sound Plugin problems

in Using jQuery Plugins • 3 months ago

Hi,

I am quite new to JQuery and i am trying to get the Sound.js plugin to work. Its not working and i keep getting a

$.fn.soundPlay

is not a plugin in firebug.

Here is my HTML:

<body>
<div id="container">
<div id="player-ui">
<div><span style="float:left">Sound File:</span><span id="sound_file_name"> </span></div>
<div>
<a href="javascript://" id="playLink"><img src="images/play.png" alt="Play" title="Play" /></a>
<a href="javascript://" id="stopLink"><img src="images/stop.png" alt="Stop" title="Stop" /></a>
</div>
</div>
</div>
</body>

Here is my Script

<script type="text/javascript" src="js/jquery.sound.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#playLink').click(function() {
$.fn.soundPlay({url: '01 Prelude 1.mp3',
playerId: 'embed_player',
command: 'play'});
$("#sound_file_name").html("01 Prelude 1.mp3");
});
$('#stopLink').click(function() {
$.fn.soundPlay({playerId: 'embed_player', command: 'stop'});
});
});
</script>

Does anyone have any ideas, help or advice. All would be really gratefully received.

Many thanks
Dan

Replies(9)

jakecigar

Re: Newbie: Sound Plugin problems

3 months ago

I found jquery.sound.js at http://code.google.com/p/jqueryjs/source/browse/trunk/plugins/sound/jquery.sound.js?r=5750

which doesn’t seem to be what you are using.

Where did you get your code?

JΛ̊KE

dan.f.wil..

Re: Newbie: Sound Plugin problems

3 months ago

Hi JΛ̊KE,

Thanks for answering. I found it here: http://archive.plugins.jquery.com/project/sound_plugin.

I'm sorry, I was just looking through your link and comparing it to mine and I discovered the problem, I wasn't linked to the plugin file properly.

I'm very sorry. I'm quite new to JQuery and plugins.

The code below now works. Do you have any tip on how I could create a skip button fubctionality. I'm going o try and add more sounds via an Array but i waned to be able to skip them?

Once again i'm vry sorry for wasting our time and ver grateul for your help.

Thanks again
Dan

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery sound play / stop plugin.</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<meta name="author" content="Vipin Kumar Rajput" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.sound.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#playLink').click(function() {
$.fn.soundPlay({url: 'music/I_Like_It_I_Love_It.mid', playerId: 'embed_player', command: 'play'});
$("#sound_file_name").html("I_Like_It_I_Love_It.mid");
});
$('#stopLink').click(function() {
$.fn.soundPlay({playerId: 'embed_player', command: 'stop'});
});
});
</script>
</head>
<body>
<center>
<div id="container">
<div id="player-ui">
<div class="clear player-info"><span style="float:left">Sound File:</span><span id="sound_file_name">  </span></div>
<div class="clear player-commands">
<a href="#" id="playLink">
<img src="images/play.png" alt="Play" title="Play" />
</a>
<a href="#" id="stopLink">
<img src="images/stop.png" alt="Stop" title="Stop" />
</a>
</div>
</div>
</div>
</center>
</body>
</html>

Attachments

JQuerySoundPlugin.zip
Size : 59.94 KB Download : 272

jakecigar

Re: Newbie: Sound Plugin problems

3 months ago

It looks similar, but less polished. I see several problems.

you are using an extremely old version of jQuery.
The plugin uses <embed> tag which is less good, compared to <audio> or a combination of embed & object. I’ll guess it won’t work in all browsers.
You would be better better off coding without this plugin. Even coding it all yourself!
Is this .mid file what you actually want to play in your final page? Midi files aren’t part of any web standard I know. The first post had an mp3.
Proprietary browser plugins are often involved with that simple <embed>.
The code's simplistic approach to stopping music is to remove it from the page.

What are your target browsers? What do you really want to play?

I’m asking you these questions because I’ve written many music players. All with different requirements!

JΛ̊KE

dan.f.wil..

Re: Newbie: Sound Plugin problems

3 months ago

Hi JΛ̊KE,

I plan to use MP3s not Midi files. Does the <embed> mean that the code might be copy written?
I was hoping to have a player that will play a selection of tracks with a pause play button, possibly a skip button and ideally a way of displaying the track name. A progress bar is not necessary but i'm interested in how to implement one.

How would i go about coding a player from scratch?

Thanks again
Dan

jakecigar

Re: Newbie: Sound Plugin problems

3 months ago

MP3 files don’t play in all browsers using html5 audio. In the ones where they don't work you have to use embed/object. BUT, there is no standard on how to control a generic embed.

http://www.jplayer.org/ normalizes playback across different browsers. Sometimes they might use flash.

HTML5 audio usually requires alternative formats that the browser chooses from.

On my home machine I have some demos.

I have a simple player http://home.jejaju.com/player/simple/ with alternative formats.

And, a playlist player for files in OGG format http://home.jejaju.com/player/simple/playlist.html .

Neither uses a plugin.

JΛ̊KE

dan.f.wil..

Re: Newbie: Sound Plugin problems

3 months ago

Wow, that's amazing! That's exactly the thing was looking for and it has a progress bar.

Do you mind taking me through it a bit? I've always been confused b the use of the 'e' in:

$(function(){
$('#duration').click(function(e){
var percentage=e.offsetX/$(this).width(),
audio=$('audio')[0],
currentTime=audio.duration*percentage
audio.currentTime=currentTime
})

Thanks
Dan

jakecigar

Re: Newbie: Sound Plugin problems

3 months ago

I thought you might like those demos! Lots of little tricks to make a nice player.

Each little part of the code does a different little trick. The part you posted allows a person to click on the progress bar, and I position the track at that spot in time.

$('#duration').click(function(e){
// whenever someone clicks run this function and pass in the event as e
var percentage=e.offsetX/$(this).width(),
// percentage = how far along the X axis / how long it is
audio=$('audio')[0],
// get the one and only audio element
currentTime=audio.duration*percentage
// compute the duration of the song * percentage
audio.currentTime=currentTime
// set it
})

JΛ̊KE

dan.f.wil..

Re: Newbie: Sound Plugin problems

3 months ago

Thank you, I might ask you a few more questions about how this works soon if you don't mind..?

Does the 'e' act a variable for the function? Is it like saying 'this' bu referring to the function rather than the selected object?

Do you find that the Player stops the Twiter API from working? That what seems to have happened on mine.

Thanks
Dan

jakecigar

Re: Newbie: Sound Plugin problems

3 months ago

e is a variable sent by jQuery to mimic the actual event that JavaScript makes for any mouse or keyboard event.

this a built in JavaScript variable, that jQuery insures is set to the DOM element where the event happened.

I can’t imagine how this code could interfere with using Twitter code. I don’t use any global variables. You’ll have to share the code or the URL to your page.

JΛ̊KE

Top Reply

Response title

Attachments

jQuery Forum

Newbie: Sound Plugin problems

Replies(9)

Re: Newbie: Sound Plugin problems

Re: Newbie: Sound Plugin problems

Attachments

Re: Newbie: Sound Plugin problems

Re: Newbie: Sound Plugin problems

Re: Newbie: Sound Plugin problems

Re: Newbie: Sound Plugin problems

Re: Newbie: Sound Plugin problems

Re: Newbie: Sound Plugin problems

Re: Newbie: Sound Plugin problems

Statistics

Tags

Actions

Related Posts