Vue.js The mp3 files have been successfully added to an array, yet the audio remains silent

Question

Vue.js The mp3 files have been successfully added to an array, yet the audio remains silent

While coding, I faced an issue that I resolved by doing some research online and tweaking the sample code. As I added more lines of code, I encountered sections that were a bit confusing to me, but I managed to make them work. My main objective is to develop code that can play a sound to alert people waiting for service when it's their turn. The "filenames.value" variable already contains an array list of MP3 files, but currently, I'm having trouble getting any sound to play.

The error message ": onMounted is called when there is no active component instance to be associated with..." indicates that lifecycle injection APIs should only be used within the setup() function during execution. Ensure that any async setup() calls register lifecycle hooks before the first await statement.

<script setup>
import { ref, onMounted, computed } from 'vue';
import axios from 'axios';

const collection1Data = ref([]);
const collection2Data = ref([]);
const finalData = ref([]);
const latestfinalData = ref([]);

const fetchData = async () => {
  const [collection1Response, collection2Response] = await Promise.all([
    axios.get('https://koh-abx.com:50100/onboardshows'),
    axios.get('https://koh-abx.com:50100/onboardlands'),
  ]);
  collection1Data.value = collection1Response.data;
  collection2Data.value = collection2Response.data;
};

onMounted(async () => {
  await fetchData();
  setInterval(async () => {
    await fetchData();
    finalData.value = [];

    collection1Data.value.forEach(doc1 => {
      const matchingDoc = collection2Data.value.find(doc2 => doc1.idshow === doc2.idshow);
      if (matchingDoc) {
        finalData.value.push({
          idshow: doc1.idshow,
          numbershow: doc1.updatedAt > matchingDoc.updatedAt ? doc1.numbershow : matchingDoc.numbershow,
          ab: doc1.updatedAt > matchingDoc.updatedAt ? doc1.ab : matchingDoc.ab,
          updatedAt: doc1.updatedAt > matchingDoc.updatedAt ? doc1.updatedAt : matchingDoc.updatedAt
        });
      } else {
        finalData.value.push({
          idshow: doc1.idshow,
          numbershow: doc1.numbershow,
          ab: doc1.ab,
          updatedAt: doc1.updatedAt
        });
      }
    });

    collection2Data.value.forEach(doc2 => {
      if (!finalData.value.find(doc => doc.idshow === doc2.idshow)) {
        finalData.value.push({
          idshow: doc2.idshow,
          numbershow: doc2.numbershow,
          ab: doc2.ab,
          updatedAt: doc2.updatedAt
        });
      }
    });

    console.log(finalData.value);

    latestfinalData.value = finalData.value.filter(doc => (Date.now() - new Date(doc.updatedAt).getTime()) < 15000);
    console.log(latestfinalData.value);

    const filenames = computed(() => {
      return latestfinalData.value.map(item => {
        const digits = item.numbershow.toString().split('');
        return digits.map(digit => `https://koh-samui.com/sound/${digit}.mp3`);
      });
    });

    console.log(filenames.value);

    const audioRef = ref(null);
    const isPlaying = ref(false);

    onMounted(() => {
      const sounds = filenames.value;

      let currentSound = 0;
      audioRef.value = new Audio(sounds[currentSound]);
      audioRef.value.addEventListener("ended", () => {
        isPlaying.value = false;
        currentSound++;
        if (currentSound < sounds.length) {
          audioRef.value.src = sounds[currentSound];
          audioRef.value.play();
        }
      });

      if (!isPlaying.value) {
        isPlaying.value = true;
        audioRef.value.play();
      }
    });

  }, 2000);
});

</script>

Here is the modified code snippet where I attempted to resolve the issue related to playing the sound:

<script setup>
import { ref, onMounted, computed } from 'vue';
import axios from 'axios';

const collection1Data = ref([]);
const collection2Data = ref([]);
const finalData = ref([]);
const latestfinalData = ref([]);
const sounds = ref([]);
const audioRef = ref(null)
const isPlaying = ref(false)

const fetchData = async () => {
  const [collection1Response, collection2Response] = await Promise.all([
    axios.get('https://koh-abx.com:50100/onboardshows'),
    axios.get('https://koh-abx.com:50100/onboardlands'),
  ]);
  collection1Data.value = collection1Response.data;
  collection2Data.value = collection2Response.data;
};

onMounted(async () => {
  await fetchData();
  setInterval(() => {
    fetchData().then(() => {
      finalData.value = [];

      collection1Data.value.forEach(doc1 => {
        const matchingDoc = collection2Data.value.find(doc2 => doc1.idshow === doc2.idshow);
        if (matchingDoc) {
          finalData.value.push({
            idshow: doc1.idshow,
            numbershow: doc1.updatedAt > matchingDoc.updatedAt ? doc1.numbershow : matchingDoc.numbershow,
            ab: doc1.updatedAt > matchingDoc.updatedAt ? doc1.ab : matchingDoc.ab,
            updatedAt: doc1.updatedAt > matchingDoc.updatedAt ? doc1.updatedAt : matchingDoc.updatedAt
          });
        } else {
          finalData.value.push({
            idshow: doc1.idshow,
            numbershow: doc1.numbershow,
            ab: doc1.ab,
            updatedAt: doc1.updatedAt
          });
        }
      });

      collection2Data.value.forEach(doc2 => {
        if (!finalData.value.find(doc => doc.idshow === doc2.idshow)) {
          finalData.value.push({
            idshow: doc2.idshow,
            numbershow: doc2.numbershow,
            ab: doc2.ab,
            updatedAt: doc2.updatedAt
          });
        }
      });

      console.log(finalData.value);

      latestfinalData.value = finalData.value.filter(doc => (Date.now() - new Date(doc.updatedAt).getTime()) < 15000);
      console.log(latestfinalData.value);
    });

    const filenames = computed(() => {
      return latestfinalData.value.map(item => {
        const digits = item.numbershow.toString().split('');
        return digits.map(digit => `https://koh-abx.com/sound/${digit}.mp3`);
      });
    });

    console.log(filenames.value);
    sounds.value = filenames.value ;
    playSound();

  }, 5000);

});


const playSound = () => {
  let currentSound = 0;
  audioRef.value = new Audio(sounds.value[currentSound]);

  audioRef.value.addEventListener("ended", () => {
    isPlaying.value = false;
    currentSound++;
    if (currentSound < sounds.value.length) {
      audioRef.value.src = sounds.value[currentSound];
      audioRef.value.play();
    }
  });

  if (!isPlaying.value) {
    isPlaying.value = true;
    audioRef.value.play();
  }
};

</script>

javascript vue.js

Answer 1

Answer №1

Your code is facing an issue where the "onMounted" hook gets called twice, once outside the range function and then inside it. To resolve this issue, you should move the audioRef, isPlaying variables, and the onMounted hook referring to them out of the interval function. This ensures that the hook is registered only once, and both the interval function and the hook can access the variables.

Check out the modified code below:

<script>
import { ref, onMounted, computed } from 'vue';
import axios from 'axios';

const setup = () => {
  // Define reactive references to store data from API requests
  const collection1Data = ref([]);
  const collection2Data = ref([]);
  const finalData = ref([]);
  const latestfinalData = ref([]);

  // Function to fetch data from two API endpoints
  const fetchData = async () => {
    try {
      // Use Promise.all to make concurrent API requests
      const [collection1Response, collection2Response] = await Promise.all([
        axios.get('https://koh-abx.com:50100/onboardshows'),
        axios.get('https://koh-abx.com:50100/onboardlands'),
      ]);
      // Update the reactive references with API response data
      collection1Data.value = collection1Response.data;
      collection2Data.value = collection2Response.data;
    } catch (error) {
      // Log any errors to the console
      console.error(error);
    }
  };

  // Function to combine data from two API endpoints and filter unique values
  const combineData = () => {
    // Combine data from two API endpoints
    finalData.value = [...collection1Data.value, ...collection2Data.value];

    // Use Map to store unique data
    const uniqueData = new Map();
    finalData.value.forEach(doc => {
      const existingDoc = uniqueData.get(doc.idshow);
      if (existingDoc) {
        // If a document with the same idshow exists in the Map, update it with the latest data
        uniqueData.set(doc.idshow, {
          idshow: doc.idshow,
          numbershow: existingDoc.updatedAt > doc.updatedAt ? existingDoc.numbershow : doc.numbershow,
          ab: existingDoc.updatedAt > doc.updatedAt ? existingDoc.ab : doc.ab,
          updatedAt: existingDoc.updatedAt > doc.updatedAt ? existingDoc.updatedAt : doc.updatedAt
        });
      } else {
        // Add the document if a similar idshow is not present in the Map
        uniqueData.set(doc.idshow, {
          idshow: doc.idshow,
          numbershow: doc.numbershow,
          ab: doc.ab,
          updatedAt: doc.updatedAt
        });
      }
    });

    // Convert Map values to an array
    finalData.value = [...uniqueData.values()];
    // Sort the array by updatedAt in descending order and keep only the latest 10 items
    latestfinalData.value = finalData.value.sort((a, b) => a.updatedAt > b.updatedAt ? -1 : 1).slice(0, 10);
  };

  // Call the fetchData function when the component mounts
  onMounted(fetchData);

  // Use computed to monitor changes in collection1Data and collection2Data and invoke combineData
  computed(() => {
    combineData();
  });

  return {
    collection1Data,
    collection2Data,
    finalData,
    latestfinalData,
    fetchData
  };
};

export default {
  setup
};
</script>

I have optimized the code for improved performance

Answer 2

Your code is facing an issue where the "onMounted" hook gets called twice, once outside the range function and then inside it. To resolve this issue, you should move the audioRef, isPlaying variables, and the onMounted hook referring to them out of the interval function. This ensures that the hook is registered only once, and both the interval function and the hook can access the variables.

Check out the modified code below:

<script>
import { ref, onMounted, computed } from 'vue';
import axios from 'axios';

const setup = () => {
  // Define reactive references to store data from API requests
  const collection1Data = ref([]);
  const collection2Data = ref([]);
  const finalData = ref([]);
  const latestfinalData = ref([]);

  // Function to fetch data from two API endpoints
  const fetchData = async () => {
    try {
      // Use Promise.all to make concurrent API requests
      const [collection1Response, collection2Response] = await Promise.all([
        axios.get('https://koh-abx.com:50100/onboardshows'),
        axios.get('https://koh-abx.com:50100/onboardlands'),
      ]);
      // Update the reactive references with API response data
      collection1Data.value = collection1Response.data;
      collection2Data.value = collection2Response.data;
    } catch (error) {
      // Log any errors to the console
      console.error(error);
    }
  };

  // Function to combine data from two API endpoints and filter unique values
  const combineData = () => {
    // Combine data from two API endpoints
    finalData.value = [...collection1Data.value, ...collection2Data.value];

    // Use Map to store unique data
    const uniqueData = new Map();
    finalData.value.forEach(doc => {
      const existingDoc = uniqueData.get(doc.idshow);
      if (existingDoc) {
        // If a document with the same idshow exists in the Map, update it with the latest data
        uniqueData.set(doc.idshow, {
          idshow: doc.idshow,
          numbershow: existingDoc.updatedAt > doc.updatedAt ? existingDoc.numbershow : doc.numbershow,
          ab: existingDoc.updatedAt > doc.updatedAt ? existingDoc.ab : doc.ab,
          updatedAt: existingDoc.updatedAt > doc.updatedAt ? existingDoc.updatedAt : doc.updatedAt
        });
      } else {
        // Add the document if a similar idshow is not present in the Map
        uniqueData.set(doc.idshow, {
          idshow: doc.idshow,
          numbershow: doc.numbershow,
          ab: doc.ab,
          updatedAt: doc.updatedAt
        });
      }
    });

    // Convert Map values to an array
    finalData.value = [...uniqueData.values()];
    // Sort the array by updatedAt in descending order and keep only the latest 10 items
    latestfinalData.value = finalData.value.sort((a, b) => a.updatedAt > b.updatedAt ? -1 : 1).slice(0, 10);
  };

  // Call the fetchData function when the component mounts
  onMounted(fetchData);

  // Use computed to monitor changes in collection1Data and collection2Data and invoke combineData
  computed(() => {
    combineData();
  });

  return {
    collection1Data,
    collection2Data,
    finalData,
    latestfinalData,
    fetchData
  };
};

export default {
  setup
};
</script>

I have optimized the code for improved performance

Vue.js The mp3 files have been successfully added to an array, yet the audio remains silent

Answer №1

Similar questions

a single button with dual functionalities

Tips for preventing a NodeJS script from crashing due to timeout being exceeded

Is it true that JavaScript Date.parse doesn't recognize Alaska Timezones?

using brackets to access objects in Vue.js

Tips for patiently waiting for a function that is filled with promises

Encountered issue #98123: Failed to generate development JavaScript bundle during `gatsby develop` using Webpack

To begin utilizing Node.js modules, you must use the `#` symbol as the starting point

We regret to inform you that there has been an integration error with Zoom SDK 2,3,5. You have reached the limit set by Zoom. Please verify

Customize Swiper js: How to adjust the Gap Size Between Slides using rem, em, or %?

What is the best way to deactivate all active classes from buttons before selecting a new one?

When using jQuery to add an item to a List, it disappears immediately after

The Ocelot API Gateway is a powerful tool for managing

Trouble with clicking buttons in Java and Selenium web scraping

The issue of gallery image loading with the galleryView jQuery plugin is causing problems

The functionality of Jquery appears to be malfunctioning on the Drupal platform, although it performs

Guide on accessing and displaying data table values in console.log using Vue.js and vuetify

I am experiencing difficulties with getting Google Analytics to function properly within my VuePress project

Guide to decoding JSONP data sent from a remote server

React - Exploring the depths of functional components

JQuery plugin for creating interactive date selection forms