benjaminhouy

I didn't figure out why exactly my setup wasn't working so I tried another approach. I put my JS file in a Stimulus controller and then loaded that and it's working great.

Ok so it seems like the issue is that I need to export the functions from the file and then import them in application.js.

import * as myModule from "./peaks-setup";

window.myModule = myModule

After doing this, I can now call myModule.functionName() in the view and it works. Not sure it's the best way but it seems to work.

Hi,

I'm using Jumpstart Pro with Rails 7 and feel very confused as to what's happening with my JavaScript functions.

I have a Lessons view in which various buttons are used to play audio, switch to a different audio file etc. For example:

<button id="slow-audio-button" data-mp3="<%= @slow_audio %>" data-webm="<%= @slow_audio_webm %>@"
              data-waveform="<%= @slow_waveform %>"
              class="w-1/3 btn-small ml-2 bg-green-500 hover:bg-green-700 text-white font-bold rounded"
              onclick="loadSlow()">Slow
      </button>

To do this, I have a "peaks-setup.js" file with all the functions that's in app/javascript. Then in application.js, I have import "./peaks-setup".

This is the JS file:

document.addEventListener("turbo:load", () => {
    (function (Peaks) {
        const options = {
            overview: {
                container: document.getElementById('overview-container'),
                waveformColor: 'blue',
            },
            mediaElement: document.querySelector('audio'),
            dataUri: {
                arraybuffer: document.getElementById('normal-audio-button').dataset.waveform
            },
        };

        Peaks.init(options, function (err, peaks) {
            window.instance = peaks;
        });
    })(Peaks);

});

function getAudioSource(audioSources, audioElement) {
    const canPlayMessages = ['probably', 'maybe'];
    for (const message of canPlayMessages) {
        for (const source of audioSources) {
            if (audioElement.canPlayType(source.type) === message) {
                return source.src;
            }
        }
    }
    return null; // No playable audio URL
}

function loadNormal() {
    const normalAudio = document.getElementById('normal-audio-button').dataset.mp3;
    const normalAudioWebm = document.getElementById('normal-audio-button').dataset.webm;
    const normalWaveform = document.getElementById('normal-audio-button').dataset.waveform;
    const explanation = document.getElementById('explanation');
    const audioElement = document.getElementById('audio');

    const audioSources = [
        {src: normalAudioWebm, type: 'audio/webm; codecs="opus"'},
        {src: normalAudio, type: 'audio/mpeg'}
    ];

    const normalAudioSource = getAudioSource(audioSources, audioElement)

    const options = {
        mediaUrl: normalAudioSource,
        dataUri: {
            arraybuffer: normalWaveform
        }
    };
    instance.setSource(options, function () {
        const view = instance.views.getView('overview');
        view.setWaveformColor('blue');
    });
    instance.player.play();
    explanation.textContent = "Click on the play button to listen to the conversation spoken at normal speed."
};

function loadSlow() {
    const slowAudio = document.getElementById('slow-audio-button').dataset.mp3;
    const slowAudioWebm = document.getElementById('slow-audio-button').dataset.webm;
    const slowWaveform = document.getElementById('slow-audio-button').dataset.waveform;
    const explanation = document.getElementById('explanation');
    const audioElement = document.getElementById('audio');


    const audioSources = [
        {src: slowAudioWebm, type: 'audio/webm; codecs="opus"'},
        {src: slowAudio, type: 'audio/mpeg'}
    ];

    const slowAudioSource = getAudioSource(audioSources, audioElement)

    const options = {
        mediaUrl: slowAudioSource,
        dataUri: {
            arraybuffer: slowWaveform
        },
        waveformColor: 'green'
    };
    instance.setSource(options, function () {
        const view = instance.views.getView('overview');
        view.setWaveformColor('green');
    });
    instance.player.play();
    explanation.textContent = "Click on the play button listen to the conversation spoken at slow speed."
};

function loadPractice() {
    const practiceAudio = document.getElementById('practice-audio-button').dataset.mp3;
    const practiceAudioWebm = document.getElementById('practice-audio-button').dataset.webm;
    const practiceWaveform = document.getElementById('practice-audio-button').dataset.waveform;
    const explanation = document.getElementById('explanation');
    const audioElement = document.getElementById('audio');

    const audioSources = [
        {src: practiceAudioWebm, type: 'audio/webm; codecs="opus"'},
        {src: practiceAudio, type: 'audio/mpeg'}
    ];

    const practiceAudioSource = getAudioSource(audioSources, audioElement)

    const options = {
        mediaUrl: practiceAudioSource,
        dataUri: {
            arraybuffer: practiceWaveform
        }
    };
    instance.setSource(options, function () {
        const view = instance.views.getView('overview');
        view.setWaveformColor('red');
    });
    instance.player.play();
    explanation.textContent = "Guess the French translation of the phrase you hear. Then try to imitate what you hear."
};


function togglePlay() {
    instance.player.isPlaying() ? instance.player.pause() : instance.player.play();
}

function rewind() {
    let currentTime = instance.player.getCurrentTime();
    instance.player.seek(currentTime - 1);
}

The part inside the event listener gets executed as expected but there is no sign of the functions afterwards when I run rails server.

Any idea what's going on? I'm probably missing something obvious but can't figure out what. Maybe I need to export the functions or something like that? Maybe I'm not importing the file the right way.

I would really appreciate some guidance.

Thanks

Hi,

I'm building my first web app using Jumpstart and I'm running into a weird issue with the Javascript in one of my show views.

The issue I have is that instead of firing on click, the toggleCompleted function fires every time the page is loaded/refreshed. What I don't understand is that this issue doesn't seem to affect the other functions such as loadNormal and loadSlow.

I spent hours looking for a solution and trying various things but nothing worked. I suspect this may be an issue with Turbo and how Rails 6 handles javascript but I'm not sure how to solve it.

Any idea?

Thanks

<div class="container px-4 mx-auto my-8">
  <div class="max-w-3xl mx-auto">
    <div class="flex items-center justify-between mb-4">
      <h1 class="h3"><%= link_to "Conversations", conversations_path %> >
        <%= @conversation.title %>
      </h1>
      <div class="inline-flex">
          <% if @conversation.completed == false %>
            <button class="btn-tertiary btn-small mr-3", 
            onclick="toggleCompleted()" 
          >Mark As Completed</button>
          <% else %>
            <button class="btn-tertiary btn-small mr-3",
            onclick="toggleCompleted()">Completed</button>
          <% end %>
           <%= @conversation.level %>
        </h5>
      </div>
    </div>
<div id="waveform"></div>
<script>
  wavesurfer = WaveSurfer.create({
      container: '#waveform',
      waveColor: 'blue',
      progressColor: 'purple',
      backend: 'MediaElementWebAudio',
  });

  wavesurfer.empty();

  wavesurfer.load("<%= url_for(@conversation.normal_audio) %>")

</script>


<div class="flex justify-evenly mb-4">
  <div>
    <button class="ml-2 bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 
    rounded" onclick="wavesurfer.skipBackward(); wavesurfer.play()">Rewind</button>

    <button class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 
    rounded" onclick="wavesurfer.playPause()">Play/Pause</button>
  </div>
  <div>

    <button class="ml-2 bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 
    rounded" onclick="loadSlow()">Slow</button>

    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 
    rounded" onclick="loadNormal()">Normal</button>

    <button class="ml-2 bg-red-500 hover:bg-green-700 text-white font-bold py-2 px-4 
    rounded" onclick="loadPractice()">Practice</button>
  </div>
</div>
    <div class="p-8 bg-white rounded shadow">
      <div class="flex space-x-8 justify-between text-2xl mt-10">
        <div>
          <% @conversation.phrases.each do |phrase| %> 
            <p><%= phrase.french_text %><p>
            <br>
          <% end %>
        </div>
        <div>
          <% @conversation.phrases.each do |phrase| %> 
            <p><%= phrase.english_text %></p>
            <br>
          <% end %>
        </div>
      </div>
    </div>
  </div>
</div>

<script>

function loadNormal() {
  wavesurfer.load("<%= url_for(@conversation.normal_audio) %>");
  wavesurfer.setWaveColor('blue');
};

function loadSlow() {
  wavesurfer.load("<%= url_for(@conversation.slow_audio) %>")
  wavesurfer.setWaveColor('green');
};

function loadPractice() {
  wavesurfer.load("<%= url_for(@conversation.conversation_practice) %>")
  wavesurfer.setWaveColor('red');
};

wavesurfer.on('seek', function () {
  wavesurfer.play();
});

function toggleCompleted() {
  <% if @conversation.completed == true %>
    <% @conversation.update(completed: false) %>
  <% else %>
    <% @conversation.update(completed: true) %>
  <% end %>
  }
</script>