Pblm de lecteurs audio multiple,

Ce sujet est résolu
Default
,

Bonjour,
Je suis compositeur, je souhaiterai créer une libairie musicale avec d'autres compositeurs, j'ai très peu de connaissance en java script.
J'utilise wavesurfer.js, qui fonctionne bien lorsqu'il n'y a qu'une seule instance sur la page, mais j'ai plusieurs instances et je ne sais pas (étant un novice totalement en javascript) comment lier le bouton de lecture à différentes instances.
Merci d'avance pour votre aide .
Olivier

Ce que je fais

Décrivez ici votre code ou ce que vous cherchez à faire
<!DOCTYPE html>


Le modèle des boîtes
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.3.7/wavesurfer.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="/menu.css">
<script></script>

<div id="box">
    <div class="buttons">
        <button onclick="wavesurfer.stop()">
            <i4 class="material-icons">
                stop
            </i4>
        </button>
        <button id="btn btn-primary" onclick="wavesurfer.playPause()">
            <i5 class="material-icons">
                pause
            </i5>
        </button>

        <button class="btn btn-primary" onclick="wavesurfer.toggleMute()">
            <i6 class="material-icons">
                volume_off
            </i6>
        </button>

    </div>


    <div class="wave">
        <wavesurfer>

            <script type="text/javascript">
                var wavesurfer = Object.create(WaveSurfer);

                wavesurfer.init({
                    container: document.querySelector('wavesurfer'),
                    waveColor: '#b7bcf4',
                    progressColor: '#000',
                    cursorColor: '#333'
                });
                wavesurfer.load('Rock Byke.mp3');

            </script>
        </wavesurfer>

    </div>

</div>

<div id="box1">
    <div class="buttons">
        <button onclick="wavesurfer.stop()">
            <i4 class="material-icons">
                stop
            </i4>
        </button>
        <button id="btn btn-primary" onclick="wavesurfer.playPause()">
            <i5 class="material-icons">
                pause
            </i5>
        </button>

        <button class="btn btn-primary" onclick="wavesurfer.toggleMute()">
            <i6 class="material-icons">
                volume_off
            </i6>
        </button>

    </div>

    <div class="wave">
        <wavesurfer> <script type="text/javascript">
            var wavesurfer = Object.create(WaveSurfer);

            wavesurfer.init({
                container: document.querySelector('wavesurfer'),
                waveColor: '#b7bcf4',
                progressColor: '#000',
                cursorColor: '#333'
            });
            wavesurfer.load('Lost In Love.mp3');
        </script> </wavesurfer>


    </div>



    <script>
        wavesurfer.on('audioprocess', function() {
            if (wavesurfer.isPlaying()) {
                var totalTime = wavesurfer.getDuration(),
                    currentTime = wavesurfer.getCurrentTime(),
                    remainingTime = totalTime - currentTime;

                document.getElementById('time-total').innerText = totalTime.toFixed(1);
                document.getElementById('time-current').innerText = currentTime.toFixed(1);
                document.getElementById('time-remaining').innerText = remainingTime.toFixed(1);
            }
        });

    </script>

    <script>
    $(function() {

var a = wavesurfer.createAll({
trackEnded: function() {
var el = $(this.element);
var next = el.closest(".wavesurfer.load").next('ol').find("li.playing").next();
if (!next.length) next = el.closest(".wavesurfer.load").next("ol").find("li").first();
next.parent().find(".playing").removeClass("playing");
next.addClass('playing');
el.attr("src", $('> a', next).attr('data-src'));
el.on("canplay", function() {
this.play()
})
}
});

    </script>



    <script src='https://code.jquery.com/jquery-3.1.0.js'></script>
Entourez votre code pour bien le mettre en forme

Ce que je veux

Le but c'est d'obtenir un code en js pour rendre chaque lecteurs audio indépendant et qu'ils soient liés à un titre de musique qu'on lui attribue

Ce que j'obtiens

pour l'instant mes 2 lecteurs jouent le même morceau au lieu des 2 indépendamment

17 Réponse

Default
,

Petit exemple non optimisé ;)

<style>
    .btn-play {
        margin-left: 20px;
    }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.3.7/wavesurfer.min.js"></script>


<div id="waveform_infos_0">
    <button type="button" class="btn-play" onclick="play_pause_song(this, 0);">Play</button>
    <span>Rock Byke</span>
    <span class="current_time"></span><span class="total_time"></span>

    <!-- Visualisation -->
    <div id="waveform_0" style="display:inline-block;width:600px;"></div>
</div>

<div id="waveform_infos_1">
    <button type="button" class="btn-play" onclick="play_pause_song(this, 1);">Play</button>
    <span>Lost In Love</span>
    <span class="current_time"></span><span class="total_time"></span>

    <!-- Visualisation -->
    <div id="waveform_1" style="display:inline-block;width:600px;"></div>
</div>

<div id="waveform_infos_2">
    <button type="button" class="btn-play" onclick="play_pause_song(this, 2);">Play</button>
    <span>Da Hool - meet her at the Loveparade</span>
    <span class="current_time"></span><span class="total_time"></span>

    <!-- Visualisation -->
    <div id="waveform_2" style="display:inline-block;width:600px;"></div>
</div>


<script>
    // https://github.com/uxitten/polyfill/blob/master/string.polyfill.js
    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart
    if (!String.prototype.padStart) {
        String.prototype.padStart = function padStart(targetLength, padString) {
            targetLength = targetLength >> 0; //truncate if number, or convert non-number to 0;
            padString = String(typeof padString !== 'undefined' ? padString : ' ');
            if (this.length >= targetLength) {
                return String(this);
            } else {
                targetLength = targetLength - this.length;
                if (targetLength > padString.length) {
                    padString += padString.repeat(targetLength / padString.length); //append to original to ensure we are longer than needed
                }
                return padString.slice(0, targetLength) + String(this);
            }
        };
    }

    // Liste des chansons
    var aSongs = [
        'Rock Byke.mp3',
        'Lost In Love.mp3',
        'Da Hool - meet her at the Loveparade.mp3'
    ];

    // Chanson en cours
    var iCurrentSong = -1;

    var wavesurfer_0 = WaveSurfer.create({
        container: '#waveform_0',
        waveColor: 'violet',
        progressColor: 'purple'
    });
    var wavesurfer_1 = WaveSurfer.create({
        container: '#waveform_1',
        waveColor: 'violet',
        progressColor: 'purple'
    });
    var wavesurfer_2 = WaveSurfer.create({
        container: '#waveform_2',
        waveColor: 'violet',
        progressColor: 'purple'
    });

    var aWaves = [wavesurfer_0, wavesurfer_1, wavesurfer_2];
    for (i = 0; i < aWaves.length; i++) {
        aWaves[i].load(aSongs[i]);

        aWaves[i].on('finish', function() {
            var btns = document.querySelectorAll('.btn-play');
            for (i = 0; i < btns.length; i++) {
                btns[i].innerText = 'Play';
            }
        });
    }

    wavesurfer_0.on('ready', function() {
        var iDuration = wavesurfer_0.getDuration();
        var waveform_infos_0 = document.getElementById('waveform_infos_0');
        var totalTime = waveform_infos_0.getElementsByClassName('total_time');
        totalTime[0].innerText = format_time(iDuration);
    });
    wavesurfer_0.on('audioprocess', function() {
        var iCurrentTime = wavesurfer_0.getCurrentTime();
        var waveform_infos_0 = document.getElementById('waveform_infos_0');
        var currentTime = waveform_infos_0.getElementsByClassName('current_time');
        currentTime[0].innerText = format_time(iCurrentTime) + ' / ';
    });

    wavesurfer_1.on('ready', function() {
        var iDuration = wavesurfer_1.getDuration();
        var waveform_infos_1 = document.getElementById('waveform_infos_1');
        var totalTime = waveform_infos_1.getElementsByClassName('total_time');
        totalTime[0].innerText = format_time(iDuration);
    });
    wavesurfer_1.on('audioprocess', function() {
        var iCurrentTime = wavesurfer_1.getCurrentTime();
        var waveform_infos_1 = document.getElementById('waveform_infos_1');
        var currentTime = waveform_infos_1.getElementsByClassName('current_time');
        currentTime[0].innerText = format_time(iCurrentTime) + ' / ';
    });

    wavesurfer_2.on('ready', function() {
        var iDuration = wavesurfer_2.getDuration();
        var waveform_infos_2 = document.getElementById('waveform_infos_2');
        var totalTime = waveform_infos_2.getElementsByClassName('total_time');
        totalTime[0].innerText = format_time(iDuration);
    });
    wavesurfer_2.on('audioprocess', function() {
        var iCurrentTime = wavesurfer_2.getCurrentTime();
        var waveform_infos_2 = document.getElementById('waveform_infos_2');
        var currentTime = waveform_infos_2.getElementsByClassName('current_time');
        currentTime[0].innerText = format_time(iCurrentTime) + ' / ';
    });



    function play_pause_song(el, iSong) {
        if (iCurrentSong === iSong) {
            aWaves[iSong].playPause();
            el.innerText = (aWaves[iSong].isPlaying()) ? 'Pause' : 'Play';
        } else {

            var btns = document.querySelectorAll('.btn-play');
            for (i = 0; i < btns.length; i++) {
                if (i === iCurrentSong) {
                    btns[i].innerText = 'Play';
                    aWaves[i].pause();
                }
            }
            iCurrentSong = iSong;
            btns[iSong].innerText = 'Pause';
            aWaves[iSong].play();
        }
    }

    function format_time(iTimeInSeconds) {
        var iHours = parseInt(iTimeInSeconds / 3600);
        iTimeInSeconds = iTimeInSeconds - (iHours * 3600);

        var iMinutes = parseInt(iTimeInSeconds / 60);
        iTimeInSeconds = iTimeInSeconds - (iMinutes * 60);

        var iSeconds = parseInt(iTimeInSeconds);

        if (iHours !== 0) {
            return (iHours.toString()).padStart(2, '0') + ':' + (iMinutes.toString()).padStart(2, '0') + ':' + (iSeconds.toString()).padStart(2, '0');
        } else {
            return iMinutes + ':' + (iSeconds.toString()).padStart(2, '0');
        }
    }
</script> 
Default
,
<div class="buttons">
        <button onclick="wavesurfer1.stop()">
            <i4 class="material-icons">
                stop
            </i4>
        </button>
        <button id="btn btn-primary" onclick="wavesurfer1.playPause()">
            <i5 class="material-icons">
                pause
            </i5>
        </button>

        <button class="btn btn-primary" onclick="wavesurfer1.toggleMute()">
            <i6 class="material-icons">
                volume_off
            </i6>
        </button>

    </div>


    <div class="wave">
        <wavesurfer id="wavesurfer1">

            <script type="text/javascript">
                var wavesurfer1 = Object.create(WaveSurfer);

                wavesurfer1.init({
                    container: document.queryElementById('wavesurfer1'),
                    waveColor: '#b7bcf4',
                    progressColor: '#000',
                    cursorColor: '#333'
                });
                wavesurfer1.load('Rock Byke.mp3');

            </script>
        </wavesurfer>

    </div>

Donnes des noms différents à tes variables (var wavesurfer) comme par exemple ci-dessus. Je pense que cela devrait fonctionner.

Default
,

Merci Yujia pour votre aide, j'ai suivis vos recommandation et rien n'y fait ....

Default
,

Je teste et d'ici 10-20minutes je te donne la solution. (le temps de me faire un café en plus)

Default
,

Voilà un exemple simplifié où chaque bouton play lance la chanson demandée.

<script src="https://unpkg.com/wavesurfer.js"></script>

<div id="waveform"></div>

<button type="button" onclick="playsound('Rock Byke.mp3');">Play</button>


<button type="button" onclick="playsound('Lost In Love.mp3');">Play</button>


<script>
    var wavesurfer = WaveSurfer.create({
        container: '#waveform',
        waveColor: 'violet',
        progressColor: 'purple'
    });

    function playsound(sFile) {
        wavesurfer.stop();
        wavesurfer.load(sFile);
        wavesurfer.on('ready', function() {
            wavesurfer.play();
        });
    }
</script>

Attention au copyright des chansons bien sûr !

Default
,

oui c'est bien cela le but recherché , je suis auteur et compositeur de ces musiques pas de soucis....

Default
,

Merci Yuijia pour votre aide précieuse, est il possible de faire apparaitre l'adn wavesurfer sur chaque titre ?

Default
,

Qu'est-ce que tu entends par adn ? (je tutoie :D)

Default
,

oui pas de soucis Yiujia on peut se tutoyer , voici la présentation recherché


Default
,

oops !! je t'envoie un lien pour la présentation recherché https://artlist.io/

Default
,

l'exemple du site montre sur chaque div= 1 lecteur + 1 waveform

Default
,

Tu es un génie Yiujia ! cela fonctionne à merveille !

Default
,

Après tu peux améliorer car si tu as trop de chansons à charger dans la même page, ça va être un peu long à charger.
Pistes à explorer :

  • Générer le graphique sur le serveur
  • Charger les chansons en ajax
  • utiliser du "lazy loading" : c'est-à-dire charger seulement les éléments visibles au fur et à mesure du scroll dans la page

    Voilà bon courage ;)

Default
,

Tu es incroyable ! je suis en admiration par tes capacités, je vais tenter de suivre tes conseils pour la suite , pourrais je avoir ton mail ?

Default
,

Hmm on ne peut pas envoyer de messages privés apparemment et je n'ai pas envie de mettre mon mail visible par tout le monde.

Default
,

Oui je comprends... je voulais te remecier pour ce que tu as fait , aussi si tu as des liens sur le type spécifique d'ajax et l'utilisation du "lazy loading" à étudier je suis preneur

Default
,

<!DOCTYPE html>


Visuelsound




<!-- Bootstrap CSS -->


.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

@media (min-width: auto {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}

                                                        <!--/////////Track0 ////////////-->


...


play_arrowpause

Olivier Olsen

Rock Byke

Electro

<!--/////////Button trigger modal ////////////-->

new_releases

<!--/////////// ModalAtmosphere//////////// -->





×


new_releases
@yield('atmosphere')



<!--//////// ModalVocal/////// -->

mic_none





×

mic_none

@yield('vocal')





<!-- ////waveform_0/// -->


00:00



New
add_shopping_cart
create_new_folder
share

                                                         <!--/////////Track1 ////////////-->
... play_arrowpause

Olivier Olsen

Lost in love

Drama

new_releases × new_releases @yield('atmosphere') mic_none × mic_none @yield('vocal')

00:00

New add_shopping_cart create_new_folder share
<script>
    // https://github.com/uxitten/polyfill/blob/master/string.polyfill.js
    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart
    if (!String.prototype.padStart) {
        String.prototype.padStart = function padStart(targetLength, padString) {
            targetLength = targetLength >> 0; //truncate if number, or convert non-number to 0;
            padString = String(typeof padString !== 'undefined' ? padString : ' ');
            if (this.length >= targetLength) {
                return String(this);
            } else {
                targetLength = targetLength - this.length;
                if (targetLength > padString.length) {
                    padString += padString.repeat(targetLength / padString.length); //append to original to ensure we are longer than needed
                }
                return padString.slice(0, targetLength) + String(this);
            }
        };
    }

    // Liste des chansons
    var aSongs = [
        'zic/Rock Byke.mp3',
        'zic/Lost In Love.mp3',

    ];

    // Chanson en cours
    var iCurrentSong = -1;

    var wavesurfer_0 = WaveSurfer.create({
        container: '#waveform_0',
        waveColor: 'rgba(171, 153, 247, 0.79)',
        progressColor: '#625162',
        cursorWidth: 0,
    });
    var wavesurfer_1 = WaveSurfer.create({
        container: '#waveform_1',
        waveColor: 'rgba(171, 153, 247, 0.79)',
        progressColor: '#bcbcbc',
        cursorWidth: 0,
    });


    var aWaves = [wavesurfer_0, wavesurfer_1];
    for (i = 0; i < aWaves.length; i++) {
        aWaves[i].load(aSongs[i]);

        aWaves[i].on('finish', function() {
            var btns = document.querySelectorAll('[data-action="play"]');
            for (i = 0; i < btns.length; i++) {
                btns[i].innerText = 'Play';
            }

        });
    }

    wavesurfer_0.on('ready', function() {
        var iDuration = wavesurfer_0.getDuration();
        var waveform_infos_0 = document.getElementById('waveform_infos_0');
        var totalTime = waveform_infos_0.getElementsByClassName('total_time');
        totalTime[0].innerText = format_time(iDuration);
    });
    wavesurfer_0.on('audioprocess', function() {
        var iCurrentTime = wavesurfer_0.getCurrentTime();
        var waveform_infos_0 = document.getElementById('waveform_infos_0');
        var currentTime = waveform_infos_0.getElementsByClassName('current_time');
        currentTime[0].innerText = format_time(iCurrentTime) + '  ';
    });

    wavesurfer_1.on('ready', function() {
        var iDuration = wavesurfer_1.getDuration();
        var waveform_infos_1 = document.getElementById('waveform_infos_1');
        var totalTime = waveform_infos_1.getElementsByClassName('total_time');
        totalTime[0].innerText = format_time(iDuration);
    });
    wavesurfer_1.on('audioprocess', function() {
        var iCurrentTime = wavesurfer_1.getCurrentTime();
        var waveform_infos_1 = document.getElementById('waveform_infos_1');
        var currentTime = waveform_infos_1.getElementsByClassName('current_time');
        currentTime[0].innerText = format_time(iCurrentTime) + ' ';
    });



    function play_Pause_song(el, iSong) {
        if (iCurrentSong === iSong) {
            aWaves[iSong].playPause();
            el.innerText = (aWaves[iSong].isPlaying()) ? 'Pause' : 'Play';
        } else {

            var btns = document.querySelectorAll('.btn-play');
            for (i = 0; i < btns.length; i++) {
                if (i === iCurrentSong) {
                    btns[i].innerText = 'Play';
                    aWaves[i].pause();
                }
            }
            iCurrentSong = iSong;
            btns[iSong].innerText = 'Pause';
            aWaves[iSong].play();
        }
    }

    function format_time(iTimeInSeconds) {
        var iHours = parseInt(iTimeInSeconds / 3600);
        iTimeInSeconds = iTimeInSeconds - (iHours * 3600);

        var iMinutes = parseInt(iTimeInSeconds / 60);
        iTimeInSeconds = iTimeInSeconds - (iMinutes * 60);

        var iSeconds = parseInt(iTimeInSeconds);

        if (iHours !== 0) {
            return (iHours.toString()).padStart(2, '0') + ':' + (iMinutes.toString()).padStart(2, '0') + ':' + (iSeconds.toString()).padStart(2, '0');
        } else {
            return iMinutes + ':' + (iSeconds.toString()).padStart(2, '0');
        }
    }

</script>
<!--                ////Footer///            -->



Featured


Visuelsound.com



Bonjour, je sollicite de nouveau votre aide pour faire fonctionner ce code sur Laravel, j'ai placé ce code html sur "welcome.blade.php" de Laravel.
Le pblm est au niveau de l'indépendance de lecture audio qui fonctionnait sur un ancien framework (cakephp) mais pas sur Laravel.. voili voilou ..merci d'avance, respect à la comunauté de Grafikart pour votre coup de main .