Currently, I am in the process of developing an app that will be able to play various sounds. To achieve this functionality, I have created a NoiseMix component that will contain multiple Noise components. Each Noise component must have its own URL parameter in order to load the corresponding mp3 file. However, I have encountered some difficulties with handling static files.
Within the NoiseMix component, I have defined the following data:
data: () => {
return {
sounds: [
{ id: 1,
url: "/assets/sounds/rain.mp3",
icon: "fas fa-cloud-rain",
name: "Rain",
volume: 50
}, {
id: 2,
url: "/assets/sounds/rain.mp3",
icon: "fas fa-wind",
name: "Wind",
volume: 50
}, {
id: 3,
url: "/assets/sounds/rain.mp3",
icon: "fas fa-water",
name: "Waves",
volume: 75
}
]
}
},
The structure of my Noise Component is as follows:
<template>
<div class="single-noise">
<div class="single-noise__icon">
<i :class="icon"></i><br />
</div>
<div class="single-noise__content">
ID: {{id}}<br />
Name: {{name}}<br />
Sound URL: {{url}}<br />
Volume: {{volume}}<br />
<input type="range" min="0" max="100" name="" v-model="volume"><br />
audio:
<audio controls>
<source :src="trackUrl" type="audio/mpeg">
</audio>
</div>
</div>
</template>
<script>
export default {
name: "Noise",
props: {
url: String,
icon: String,
name: String,
id: Number,
volume: Number,
},
computed: {
trackUrl () {
// THIS LINE IS THE PROBLEM
// If I use require('@' + this.url); the app doesn't load at all and there's no error
return require('@' + '/assets/sounds/rain.mp3');
}
}
}
</script>