Блог

Я создаю библиотеку React с накопительным пакетом, мне удалось исправить все другие проблемы, которые у меня были, но я не могу заставить аудиофайлы работать в сборке.

В сборке реж. Я вижу импортированные аудиофайлы, но когда я запускаю приложение, которое называется Библиотекой, аудиофайлы, похоже, не связаны.

Я использую @rollup/plugin-url для управления аудиофайлами.

вот ошибка, которую я получаю в главном приложении =>

Импорт аудиофайлов,

 import sound from './Sound.mp3'; 
const play = new Audio(sound);

const SoundCom = ({alive = true}) => {
    const [played, setPlayed] = useState(false);
    
    const playAudio = () => {
        play.play().then(() => {console.log('played!')});
    }

    useEffect(() => {
        if (!played amp;amp; !alive) {
            playAudio();
            setPlayed(true);
        }
    }, [alive, played])

    return (
        <div className={'main-styles'}>
            .....
        </div>
    ) }
 

rollup.config.js =>

 import babel from 'rollup-plugin-babel'
import commonjs from 'rollup-plugin-commonjs'
import external from 'rollup-plugin-peer-deps-external'
import resolve from 'rollup-plugin-node-resolve'
import scss from 'rollup-plugin-scss'
import json from '@rollup/plugin-json'
import image from 'rollup-plugin-img'
import url from '@rollup/plugin-url'

import pkg from './package.json'

export default {
  input: 'src/index.js',
  output: [
    {
      file: pkg.main,
      format: 'cjs'
    },
    {
      file: pkg.module,
      format: 'es'
    }
  ],
  plugins: [
    babel({
      exclude: 'node_modules/**',
      presets: ['@babel/preset-react']
    }),
    resolve(),
    commonjs({
      namedExports: {
        'node_modules/react-countdown-circle-timer/lib/index.js': [
          'CountdownCircleTimer'
        ]
      }
    }),
    external(),
    scss({
      output: './dist/style.css',
      failOnError: true,
      runtime: require('sass')
    }),
    image({ limit: 100000 }),
    json(),
    url({
      fileName: '[name][extname]',
      include: ['**/*.mp3']
    })
  ],
  external: ['react-dom']
}
 

Попробуйте загрузить аудио или фильм в онлайн-облако и скопируйте ссылку, созданную из этого облака. Затем реализуйте ссылку в своем приложении.

По какой-то причине, когда я добавил ограничение на URL-адрес, он начал работать.

В rollup.config.js =>

 export default {
  ....
  plugins: [
    ....
    url({
      fileName: '[name][extname]',
      include: ['**/*.mp3'],
      limit: 100000
    })
  ],
  ....
}