{"id":26164,"library":"react-native-web-sound","title":"react-native-web-sound","description":"A drop-in replacement for react-native-sound that works with react-native-web. Version 0.2.1 is the current stable release. It allows playing audio in web browsers by aliasing the react-native-sound package to this web implementation. The library mirrors the original API exactly, so no code changes are needed beyond the webpack alias configuration. It has low maintenance cadence but remains functional for basic audio playback needs. Alternatives include react-native-sound directly (native only) or web-specific libraries like Howler.js, but this package minimizes migration effort for existing react-native-sound users.","status":"active","version":"0.2.1","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/mybigday/react-native-web-sound","tags":["javascript","react-native","react-native-web","react-native-sound"],"install":[{"cmd":"npm install react-native-web-sound","lang":"bash","label":"npm"},{"cmd":"yarn add react-native-web-sound","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-native-web-sound","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency required for react-native-web environment","package":"react-native-web","optional":false}],"imports":[{"note":"The library uses default export, mirroring react-native-sound. Named export does not exist.","wrong":"import { Sound } from 'react-native-sound'","symbol":"Sound","correct":"import Sound from 'react-native-sound'"},{"note":"CommonJS require needs .default because the package uses ESM default export internally.","wrong":"const Sound = require('react-native-sound')","symbol":"Sound","correct":"const Sound = require('react-native-sound').default"},{"note":"Direct import of this package works, but recommended usage is via webpack alias to react-native-sound.","wrong":"","symbol":"Sound","correct":"import Sound from 'react-native-web-sound'"}],"quickstart":{"code":"// webpack.config.js\nresolve: {\n  alias: {\n    'react-native': 'react-native-web',\n    'react-native-sound': 'react-native-web-sound',\n  }\n}\n\n// App.js\nimport React from 'react';\nimport { Button } from 'react-native';\nimport Sound from 'react-native-sound';\n\nconst App = () => {\n  const playSound = () => {\n    const sound = new Sound('https://example.com/audio.mp3', null, (error) => {\n      if (error) {\n        console.error('Failed to load sound', error);\n        return;\n      }\n      sound.play(() => sound.release());\n    });\n  };\n\n  return <Button title=\"Play\" onPress={playSound} />;\n};\n\nexport default App;","lang":"javascript","description":"Demonstrates how to configure webpack alias and use the Sound API to play remote audio in a React Native Web app."},"warnings":[{"fix":"Add the alias as shown in the README.","message":"Webpack alias configuration is required for package to work; direct import of 'react-native-web-sound' is possible but may lead to inconsistent behavior if other parts of code expect 'react-native-sound'.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Use only remote URLs for audio files.","message":"The package does not support all features of react-native-sound, such as file system paths or bundled assets. Only URL playback is verified to work.","severity":"breaking","affected_versions":">=0.0.0"},{"fix":"Ensure play() is called from a user-initiated event handler like a button press.","message":"The Sound constructor callback may not fire in all browsers due to autoplay policies. User interaction must precede sound.play().","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Consider migrating to a more actively maintained web audio library like Howler.js or native solution.","message":"react-native-web-sound has not been updated in over 2 years; newer versions of react-native-web may cause compatibility issues.","severity":"deprecated","affected_versions":">=0.2.1"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Add the alias as shown in the README: 'react-native-sound': 'react-native-web-sound'","cause":"Webpack alias not configured or missing in resolve.alias.","error":"Cannot find module 'react-native-sound'"},{"fix":"Use default import: import Sound from 'react-native-sound' or const Sound = require('react-native-sound').default","cause":"Using named import instead of default import or missing .default in CommonJS.","error":"TypeError: Sound is not a constructor"},{"fix":"Wrap sound.play() in a user-initiated event handler (e.g., onClick).","cause":"Autoplay restriction due to browser policy; sound.play() must be triggered by user gesture.","error":"Failed to load sound: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}