Next.js Discord

Discord Forum

How to config MP3 in Next.js

Unanswered
Tonkinese posted this in #help-forum
Open in Discord
TonkineseOP
Hi Guys, need a bit of help. My paths seem incorrect but have not been able to fix them, the images and audio's are not showing/playing. I have this grid component inside the learn page, when i place the code inside the learn page everything works, but when i adapt the paths and move it inside the grid component they stop showing. 

import img from '../../../public/images/learn/img.png'

import SO1 from '../../../public/audio/FO-S01.mp3'
import SO2 from '../../../public/audio/FO-S02.mp3'
import SO3 from '../../../public/audio/FO-S03.mp3'
import SO4 from '../../../public/audio/FO-S04.mp3'
import SO5 from '../../../public/audio/FO-S05.mp3'
import SO6 from '../../../public/audio/FO-S06.mp3'


const Grid = () => {
  const audioFiles = [
    {SO1},{SO2},{SO3},{SO4},{SO5},{SO6}
   
  ];

<Grid item xs={2} sm={4} md={4} key={index}>
              <img src={img} alt={` Call ${index}`} style={{ width: '100%' }} />
              <audio ref={(audio) => (audioRefs.current[index] = audio)}>
                <source src={audioFile} type="audio/mpeg" />
              </audio>
              <IconButton onClick={() => handlePlayPause(index)}>
                {isPlaying[index] ? <PauseCircleIcon fontSize="large" /> : <PlayCircleIcon fontSize="large" />}
              </IconButton>
            </Grid>


Inside the learn page the path is and they all work.
import audio from '../../public/audio/frequency.mp3'
import img from '../../public/images/learn/img.png'

13 Replies

@Tonkinese Hi Guys, need a bit of help. My paths seem incorrect but have not been able to fix them, the images and audio's are not showing/playing. I have this grid component inside the learn page, when i place the code inside the learn page everything works, but when i adapt the paths and move it inside the grid component they stop showing. import img from '../../../public/images/learn/img.png' import SO1 from '../../../public/audio/FO-S01.mp3' import SO2 from '../../../public/audio/FO-S02.mp3' import SO3 from '../../../public/audio/FO-S03.mp3' import SO4 from '../../../public/audio/FO-S04.mp3' import SO5 from '../../../public/audio/FO-S05.mp3' import SO6 from '../../../public/audio/FO-S06.mp3' const Grid = () => { const audioFiles = [ {SO1},{SO2},{SO3},{SO4},{SO5},{SO6} ]; <Grid item xs={2} sm={4} md={4} key={index}> <img src={img} alt={` Call ${index}`} style={{ width: '100%' }} /> <audio ref={(audio) => (audioRefs.current[index] = audio)}> <source src={audioFile} type="audio/mpeg" /> </audio> <IconButton onClick={() => handlePlayPause(index)}> {isPlaying[index] ? <PauseCircleIcon fontSize="large" /> : <PlayCircleIcon fontSize="large" />} </IconButton> </Grid> Inside the learn page the path is and they all work. import audio from '../../public/audio/frequency.mp3' import img from '../../public/images/learn/img.png'
joulev
1. audio doesn't work for this kind of import without extra configuration
2. image imports do work but for next/image only, since the imported value is an object not a url string. to get the url string you can use .src:
import img from '../../../public/images/learn/img.png'
...
return <img src={img.src} />

3. if you can import something, it means you don't have to put it inside public. the above import statement will still work if you put your image anywhere, even inside app or pages
ItetsuLaTable
You can do ./images/learn/img.png
Directly
Instead of importing the image
TonkineseOP
Jeeeh Got it! Images work now. I had next/images and react audioplayer imported in Learn and didn’t do the same in the grid component!
@joulev 1. audio doesn't work for this kind of import without extra configuration 2. image imports do work but for next/image only, since the imported value is an object not a url string. to get the url string you can use `.src`: tsx import img from '../../../public/images/learn/img.png' ... return <img src={img.src} /> 3. if you can import something, it means you don't have to put it inside `public`. the above import statement will still work if you put your image anywhere, even inside `app` or `pages`
TonkineseOP
Is this what you mean with the config? 
webpack(config, options) {
    const { isServer } = options
    config.module.rules.push({
      test: /\.(ogg|mp3|wav|mpe?g)$/i,
      exclude: config.exclude,
      use: [
        {
          loader: require.resolve('url-loader'),
          options: {
            limit: config.inlineImageLimit,
            fallback: require.resolve('file-loader'),
            publicPath: `${config.assetPrefix}/_next/static/images/`,
            outputPath: `${isServer ? '../' : ''}static/images/`,
            name: '[name]-[hash].[ext]',
            esModule: config.esModule || false,
          },
        },
      ],
    })
TonkineseOP
@joulev is there something i'm doing wrong? Still can't get the audio to work despite this configuration.
I can't use react audio player like in my other components because of the console it displays. I need it to look like in image 2.
Boston Terrier
I wonder if this might be helpful? https://www.joshwcomeau.com/react/announcing-use-sound-react-hook/
I haven't tried or used this at all, just did some searching
@Boston Terrier I wonder if this might be helpful? https://www.joshwcomeau.com/react/announcing-use-sound-react-hook/
TonkineseOP
Omg I’m literally on that page right now, i’ll let you know if it worked.
TonkineseOP
@Boston Terrier it works with one sound but can’t get it to run an array of sounds yet. Let’s see