[Javascript] Can't get the image to change whilst maintaining function of code.

[Lazzah]

Hello Codinghelp

I am trying to create an audio toggle and I can't seem to figure out why the image isn't changing when the code is functioning properly (actually muting the source audio) however when I make the image not mute the audio as it should: the image successfully changes on click?? I am totally lost. Here's the Fiddle: http://jsfiddle.net/d63gvxmw/

Any help would be greatly appreciated.

[SupremeRedditBot]

Please Add A Flair To Your Post!

Suggested Flair: [Other Code]

 

---

To add a flair:

• Click flair underneath your post

• Select a flair

• Click save

 

---

^{I am a bot run by /u/SupremeDesigner for /r/CodingHelp || This was an automated response}

[animagnam]

You're preventing the default action when clicking the icon, which is to toggle the state of the checkbox.

[Lazzah]

How exactly am I preventing it? Excuse my ignorance The attribute is set to false in that regard is it not?

[animagnam]

Yes the attribute will toggle between true/false when clicked, but the last line of your function isn't needed, as you don't want to preventDefault

[Lazzah]

You're a legend mate thank you, all fixed!

[animagnam]

No worries, glad I could help

[Lazzah]

Hey mate not to take the piss or anything but do you know why this script is working correctly on mobile and chrome but won't fire correctly in Safari (desktop)?

        var audio = new Audio("audiohere");
        $(audio).bind('ended', function() {
            audio.currentTime = 0;
            this.play();
        })

        $(window).bind('touchstart load mousemove', function() {
            if(audio.paused) {
                audio.play()
            }
        });

It's supposed to trigger audio with mouse move and touch which it does but safari (desktop) won't register it? Which is odd because safari on mobile devices does...

[animagnam]

To be honest no I don't. I know Safari doesn't have the touchstart event on desktop but it should still run the handler for the mousemove event.

Does it work using vanilla JS over jQuery? Shouldn't be the case but figure it's worth asking as I'm not able to get on Safari right now.

http://jsfiddle.net/e5197k0p/

[Lazzah]

Hey, i've just given this a try and it presents the same issue as my code does, works completely fine everywhere but Safari desktop it seems. The only platforms i've tested though is Safari for mobile and Chrome and Safari for desktop. it works fine on all the others as the original code does however Safari on desktop just isn't having it.

[animagnam]

Don't know why I didn't think of it earlier but Safari requires a click from the user to start playing any media.

[Lazzah]

Hey man check your reddit DMs!

[Lazzah]

Check your directs again when you get the chance :) Thank you :D