MagicMirror² v2.5.0 is available! For more information about this release, check out this topic.

Sound loop not seamless. Request advice.


  • Module Developer

    I’m working on a new module. It is working but with one major issue. I’m trying to loop a .wav file seamlessly. I’ve done my research and know not to use MP3 files. The general online consensus is that .wav files are best for creating seamless sound loops. I’ve created and/or edited several .wav files in the app called “Audacity.” Within the app the files loop perfectly (seamlessly) with no gaps or drops. However, when I use the following function, there is the slightest gap/drop of the sound when it loops.

    if (this.config.sounds != "") {
       var sound = new Audio();
       sound.src = 'modules/MMM-SoundMachine/sounds/' + this.config.sounds + '.wav';
       sound.loop = true;
       sound.play();
       }
    

    Please advise me on how to achieve a seamless loop. Without it, this module is dead in the water. Thank you ahead of time.


  • Module Developer

    @mykle1

    I remember having a similar issue with HTMl a long time ago, what I ended up doing was making 3 copys of the wav file and looping through them where one ended at a certain time and the other would start at the same time. But I had to time the gap, and set the time to start the next wav file at that point of the current wav file. I don’t remember the exact coding, been a while now, but after getting it to loop through the 3 copys, starting the next wav at the end of the current wav minus the gap time.

    IE: if the wav files are 1.75s, and if the gap was 0.25s, then the next wav would start at 1.5s of the current wav.

    If that makes any sense, apologies if it doesn’t.


  • Module Developer

    @justjim1220

    Makes sense but I’m not willing to make 3 copies of each sound file that will accompany the module, not to mention editing each and every one of them.


  • Module Developer

    @mykle1

    I understand that, It was a lot of work for me

    Was thinking though, I think I only used 2 copies.


  • Module Developer

    For those interested in helping me find a solution. I had intermittent success (sort of) with this function

    myAudio = new Audio('modules/MMM-SoundMachine/sounds/rain.wav');
    myAudio.addEventListener('ended', function() {
    this.currentTime = 0;
    this.play();
    }, false);
    myAudio.play();
    
    var audio = new Audio('modules/MMM-SoundMachine/sounds/rain.wav');
    
    audio.addEventListener('canplaythrough', function() {
    this.currentTime = this.duration - 10;
    this.loop = true;
    this.play();
    });
    

    Half of the time the module would error
    Failed to load resource: net::ERR_CACHE_OPERATION_NOT_SUPPORTED
    This did not stop the module from loading but the sound file still has the gap when looping.

    The other half of the time the module would not error and the gap would be gone, a seamless loop. However, the sound would be distorted, almost as if the sound were playing twice, but offset. At least I’ve made some progress.

    Still, I await assistance at your leisure, friends. 🙂


  • Module Developer

    Very interesting issue. Is it worked on RPI also?


  • Module Developer

    @sean

    Hi sean. No, I have not tried it on a Pi, yet. I only just started developing the module and came upon this issue. When/if I can solve this, the PI will get its chance.