Bonjour,
Je souhaiterais faire un bouton on/off sur mon site (dans le meme style que ce site la : http://www.powergloveaudio.com/)
J'ai monté mon site sur wordpress, j'ai integré ma video avec un plugin Jquery du coup le son se coupe quqnd je clique sur l'image. Mais j'aurais besoin de vos lumieres ppour me dire se qui ne marche pas dans mon code
Je ne sais pas si cela sera assez clair mais est-ce quelqu'un peut me guider
Merci beaucoup [ravi]

Voici le code que j'ai rajouté pour changer l'image et qui ne marche pas.

$('document').ready(function() {
 
      $('.js-mute-audio').click(function() {
        $(this).toggleClass("is-mute");
    }
  });

Voici le code html

<em class="mute-audio tubular-mute js-mute-audio is-mute" title="Mute audio">mute audio</em>

Et enfin le css

.mute-audio {
    background: rgba(0, 0, 0, 0) url(".../images/audio-icon-2x.png") no-repeat scroll center center / 20px 20px;
    cursor: pointer;
    height: 20px;
    opacity: 0.6;
    position: absolute;
    text-indent: -9999px;
    transition: opacity 0.25s ease-in-out 0s;
    width: 20px;
    z-index: 1000;
margin-left: 6px;
 margin-right: 6px;
}

.mute-audio:hover {
    opacity: 1;
}

.mute-audio .is-mute {
background: rgba(0, 0, 0, 0) url(".../images/audio-icon-mute-2x.png") no-repeat scroll center center / 20px 20px;}

Voici mon code Jquery pour lancer la video.

function ($, window) {

    // test for feature support and return if failure
   
    // defaults
    var defaults = {
        ratio: 16/9, // usually either 4/3 or 16/9 -- tweak as needed
        videoId: 'RxJG5rmQusQ', // toy robot in space is a good default, no?
        repeat: true,
        width: $(window).width(),
        wrapperZIndex: 99,
        playButtonClass: 'tubular-play',
        pauseButtonClass: 'tubular-pause',
        muteButtonClass: 'tubular-mute',
        volumeUpClass: 'tubular-volume-up',
        volumeDownClass: 'tubular-volume-down',
        increaseVolumeBy: 10,
        start: 0
    };

    // methods

    var tubular = function(node, options) { // should be called on the wrapper div
        var options = $.extend({}, defaults, options),
            $body = $('body') // cache body node
            $node = $(node); // cache wrapper node

        // build container
        var tubularContainer = '<div id="tubular-container" style="overflow: hidden; position: fixed; z-index: 1; width: 100%; height: 100%"><div id="tubular-player" style="position: absolute"></div></div><div id="tubular-shield" style="width: 100%; height: 100%; z-index: 2; position: absolute; left: 0; top: 0;"></div>';

        // set up css prereq's, inject tubular container and set up wrapper defaults
        $('html,body').css({'width': '100%', 'height': '100%'});
        $body.prepend(tubularContainer);
        $node.css({position: 'relative', 'z-index': options.wrapperZIndex});

        // set up iframe player, use global scope so YT api can talk
        window.player;
        window.onYouTubeIframeAPIReady = function() {
            player = new YT.Player('tubular-player', {
                width: options.width,
                height: Math.ceil(options.width / options.ratio),
                videoId: options.videoId,
                playerVars: {
                    controls: 0,
                    showinfo: 0,
                    modestbranding: 1,
                    wmode: 'transparent'
                },
                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                }
            });
        }

        window.onPlayerReady = function(e) {
            resize();
            if (options.mute) e.target.mute();
            e.target.seekTo(options.start);
            e.target.playVideo();
        }

        window.onPlayerStateChange = function(state) {
            if (state.data === 0 && options.repeat) { // video ended and repeat option is set true
                player.seekTo(options.start); // restart
            }
        }

        // resize handler updates width, height and offset of player after resize/init
        var resize = function() {
            var width = $(window).width(),
                pWidth, // player width, to be defined
                height = $(window).height(),
                pHeight, // player height, tbd
                $tubularPlayer = $('#tubular-player');

            // when screen aspect ratio differs from video, video must center and underlay one dimension

            if (width / options.ratio < height) { // if new video height < window height (gap underneath)
                pWidth = Math.ceil(height * options.ratio); // get new player width
                $tubularPlayer.width(pWidth).height(height).css({left: (width - pWidth) / 2, top: 0}); // player width is greater, offset left; reset top
            } else { // new video width < window width (gap to right)
                pHeight = Math.ceil(width / options.ratio); // get new player height
                $tubularPlayer.width(width).height(pHeight).css({left: 0, top: (height - pHeight) / 2}); // player height is greater, offset top; reset left
            }

        }

        // events
        $(window).on('resize.tubular', function() {
            resize();
        })

        $('body').on('click','.' + options.playButtonClass, function(e) { // play button
            e.preventDefault();
            player.playVideo();
        }).on('click', '.' + options.pauseButtonClass, function(e) { // pause button
            e.preventDefault();
            player.pauseVideo();
        }).on('click', '.' + options.muteButtonClass, function(e) { // mute button
            e.preventDefault();
            (player.isMuted()) ? player.unMute() : player.mute();
        }).on('click', '.' + options.volumeDownClass, function(e) { // volume down button
            e.preventDefault();
            var currentVolume = player.getVolume();
            if (currentVolume < options.increaseVolumeBy) currentVolume = options.increaseVolumeBy;
            player.setVolume(currentVolume - options.increaseVolumeBy);
        }).on('click', '.' + options.volumeUpClass, function(e) { // volume up button
            e.preventDefault();
            if (player.isMuted()) player.unMute(); // if mute is on, unmute
            var currentVolume = player.getVolume();
            if (currentVolume > 100 - options.increaseVolumeBy) currentVolume = 100 - options.increaseVolumeBy;
            player.setVolume(currentVolume + options.increaseVolumeBy);
        })
    }

    // load yt iframe js api

    var tag = document.createElement('script');
    tag.src = "//www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    // create plugin

    $.fn.tubular = function (options) {
        return this.each(function () {
            if (!$.data(this, 'tubular_instantiated')) { // let's only run one
                $.data(this, 'tubular_instantiated',
                tubular(this, options));
            }
        });
    }

})(jQuery, window);

Voici mon code Jquery qui appelle ma fontion

$('document').ready(function() {
    var options = { videoId: 'RxJG5rmQusQ', start: 3 };
    $('#wrapper').tubular(options);
});

-
Edité par ginie645 27 juillet 2017 à 7:53:27

personne???

Tu veux que le son se met au volume 0 ou que on met la musique en pause ?

Le son s’arrête déjà quand je clique sur le bouton enfait tout marche niquel, je n'arrive juste pas a mettre l'image pause quand le musique est en pause et mettre l'image play quand la musique reprend

essayer d'adapter ce code 

var btnPlayPause = document.getElementById("idDuBoutonPlayPause")
btnPlayPause.addEventListener("click" , function(e){
    var lecteurMusique = document.getElementById("idDuLecteurMusique")
    if(lecteurMusique.paused){
        lecteurMusique.play()
        document.getElementById("idDuLimage").setAttribute("src" , "image play")
    }else{
        lecteurMusique.pause()
        document.getElementById("idDuLimage").setAttribute("src" , "image pause")
    }
})

Nan ca ne fonctionne toujours pas, je vois pas trop ou est l'erreur je n'y connais vraiment rien en javascript

$('document').ready(function() {
  
      var btnPlayPause = document.getElementById("tubular-mute")
btnPlayPause.addEventListener("click" , function(e){
    var lecteurMusique = document.getElementById("js-mute-audio")
    if(lecteurMusique.paused){
        lecteurMusique.play()
        document.getElementById("mute-audio").setAttribute("src" , ".../images/audio-icon-2x.png")
    }else{
        lecteurMusique.pause()
        document.getElementById("is-mute").setAttribute("src" , ".../images/audio-icon-mute-2x.png")
    }
})
  });

??