0

Hello stackovercool community,

I'm trying to set a sound player on my site and display the title of the track in the footer. So far so good but I'd like to mute the music when clicking on the text title. I'd also liked to change the opacity of the text when paused.

I'm sorry my JS knowledge lacks, exactly, of knowledge. I tried this after various research but doesn't works.

function play(idPlayer) {
    var player = document.querySelector('#' + idPlayer);

    if (player.played) {
        player.pause();
        player.style.opacity = "0.5";
    } else {
        player.play();
        player.style.opacity = "1";
    }
}

https://jsfiddle.net/65zup3od/

It's mainly based on this tuts https://openclassrooms.com/courses/dynamisez-vos-sites-web-avec-javascript/l-audio-et-la-video

I gratefully thank you in advance for the help!

4
  • The reason the fiddle wont pause is that you've selected the "onDomReady" option, when you should have selected the "No Wrap - in head" option. This has the effect of putting all of your js code in a function that is fired in response to the document loading. This then means that when your html is clicked, it cannot 'find' the play function you've written, since it isn't a part of the global namespace, but is hidden inside the (jsfiddle added) function that fires when the fiddle has loaded. That gets you part of the way. Use your debugger and MDN help on AudioContext for the rest. ;)
    – enhzflep
    Sep 4, 2015 at 20:36
  • I see, interesting "concepts" on wich I should dig further, thanks for the explanation. I spent more than an hour without any concrete result but that might get me somewhere, eventually 8) The same occurs on my wordpress, I entered the JS in a custom field and Firebug tells me that play is not defined. I thought it might have something to do with declaring function play(audioPlayer) { var player = document.querySelector('#audioPlayer'); instead of function play(idPlayer) { var player = document.querySelector('#' + idPlayer); but didn't worked. Sep 5, 2015 at 10:24
  • @enhzflep In this fiddle the code works only for pausing, not replay nor modifying opacity jsfiddle.net/65zup3od/1. It doesn't work at all on my site, with the editor I saw that custom JS is outputted at the end of <body> but there is default code in it, wich, my guess, cause the function to diswork as it is related to what you explained to me. Sep 11, 2015 at 11:21
  • var $j = jQuery.noConflict(); $j(document).ready(function() { "use strict"; window.onready=function play(idPlayer) { var player = document.querySelector('#' + idPlayer); if (player.played) { player.pause(); player.style.opacity = "0.5"; } else { player.play(); player.style.opacity = "1"; } }}); I tried adding window.onready=function() without success Sep 11, 2015 at 11:22

1 Answer 1

0

https://jsfiddle.net/65zup3od/3/ Here's the working answer if anyone wants something similar.

Still doesn't works on my wordpress though, I think because of

var $j = jQuery.noConflict(); $j(document).ready(function()

I think the question is solved then.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.