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

What is the best way to include and delete several images on a canvas?

Pagination malfunction on AngularJS md-data-table is causing issues

I am unable to fast forward or rewind my videos stored on Google Bucket

Arranging array elements according to the values in another array

Using a number input with step increments of 0.01 in AngularJS can result in undefined values for specific inputs

Webpack is failing to recognize certain CSS files

Response from Vimeo's AJAX API

Creating a text box that displays an inverted input

Tips for patiently waiting for a series of asynchronous calls to successfully complete

React Material UI - DataGrid Continuously Distracting Focus Away from Input Field

Populate an HTML table using a JavaScript array containing objects

Leveraging JavaScript event handlers within a progress wizard located within an update panel

Utilizing the power of async/await to simplify Hapi17 route abstraction

What is the best way to bundle an Express server into an Electron application?

Trigger Knockout bindings once the ajax request has been completed

Issue: User is being redirected from "/login" to "/home" due to a navigation guard. This problem arises in the interaction between Vue-router and Firebase authentication

Tips for updating the value within a textfield in HTML

The component is no longer able to locate the imported element when it is being shared

Fetching data from MongoDB, loading over 3000 entries and implementing pagination

IE8 triggers automatic download upon receiving JSON response using jQuery