HTML/jQuery play/pause music button not working

[Divize]

So i've decided to automatically load some music when my webpage loads and whatnot, but problem: when I click on the button to make it pause, it doesn't pause or do anything.

Here's the code I used

<a id="mtoogle" style="cursor:pointer;">
<img src="img/speaker.png"></a>
<audio id="playTune" autoplay>
<source src="img/dp-touch.mp3">
</audio>

<script type="text/javascript">
$('#mtoogle').toggle(
function () {
document.getElementById('playTune').pause();
},
function () {
document.getElementById('playTune').play();
}
);
</script>

here's the page if you didn't understand what I meant: [url]http://god.x10.mx/divii/theme/index.html[/url]

So can someone tell me what I did wrong?
It will be greatly appreciated, thanks!

[Scratch]

ReferenceError: $ is not defined

[editline]26th July 2014[/editline]

Solution: You have Jquery script loading after you load the initial js to load the toggle (line 856 - Footer)

Put it in the header

[Divize]

Sadly it still doesn't seem to work, perhaps I didn't move the correct code in the correct section? :l

[Scratch]

I can say that you've made progress, the reference error no longer shows in the console.
Jquery now works propery for the element.

But you may be asking why the audio isn't toggling.
I actually just noticed this myself.
the toggle event was removed from Jquery a while back
[img]http://5crat.ch/a/a5st[/img]

It's now a hide animation
[url]http://api.jquery.com/toggle/[/url]

[Divize]

Oh shit, well thanks a lot for your help, Scratch.
I'll try to find a way to get it to work... although I probably won't find anything and will either let the website automatically play the song or just no songs at all.
Nonetheless thanks again for your help, it's greatly appreciated!

[Coment]

If Microsoft is [URL="http://msdn.microsoft.com/en-us/library/ie/gg589489%28v=vs.85%29.aspx"]right [/URL]and .paused works, you could just do a function with a simple if(element.paused){element.play()} else {element.pause();}

[Scratch]

[QUOTE=Coment;45505693]If Microsoft is [URL="http://msdn.microsoft.com/en-us/library/ie/gg589489%28v=vs.85%29.aspx"]right [/URL]and .paused works, you could just do a function with a simple if(element.paused){element.play()} else {element.pause();}[/QUOTE]

Otherwise just use a Boolean that starts as true

[Svenskunganka]

Here's something that can work for you:

$(document).keypress(function(e) {
		var music = $('#playTune');
		if(music.prop('paused')) {
			music[0].play();
		}
		else {
			music[0].pause();
		}
});

Bounds to the Enter button

[DrTaxi]

[QUOTE=Scratch.;45505589]I can say that you've made progress, the reference error no longer shows in the console.[/QUOTE]

We should probably mention that OP should at least open their browser's developer console and look if any errors pop up when their script is run.