I can't play a .mp3 file

[EzequielDeOliveira]

I've tried use a path for my file, when i put a path to .mp4 file ok but when i put a .mp3 file in the same folder , the audio can't reproduce

my code for VideoComponent:

import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { View, StyleSheet } from 'react-native'
import Video from 'react-native-video'

export default class VideoComponent extends React.Component {

  renderVideo () {
      return(
        <Video
          source={{uri: 'file:./assets/JB.mp3'}}
          style={{ width: 800, height: 800 }}
          muted={false}
          repeat={true}
          resizeMode={"cover"}
          volume={1.0}
          rate={1.0}
          ignoreSilentSwitch={"obey"}

        />
      )
  }

  render () {
    return (
      <View>
        {this.renderVideo()}
      </View>
    )
  }
}

// Later on in your styles..
var styles = StyleSheet.create({
  backgroundVideo: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },
});

code for app.js :

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import VideoComponent from './VideoComponent'

export default class App extends Component {
  render() {
    return (
        <View>
        <VideoComponent />
        </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  }
});

[gazedash]

Can reproduce this on android (both on genymotion and avd)

[EzequielDeOliveira]

I'm using avd for android , i can play video, but when i try a .mp3, don't reproduces anything

[kesha-antonov]

Can't play mp3 on Xiaomi Mi8

[gazedash]

Maybe related to this: https://google.github.io/ExoPlayer/faqs.html#why-are-some-media-files-not-seekable

I have managed to fix it in different react-native library
doublesymmetry/react-native-track-player@dev...gazedash:dev

[onitzschke]

I'm also not able to play mp3 files.
No problems with mp4 files.

[gazedash]

Downgrading to 4.2.0 make mp3 files work

[onitzschke]

@cobarx please reopen this issue, see 2898f8c

[brian-pitsch]

I can't play m4a files either in 4.3.x, but it works in 4.2.0.
There is an index out-of-bounds error in logcat, so I'm guessing it's related to 4.3 upgrade that broke playing files only an audio track.

[wkmcyz]

I downgraded to v4.2.0 as @brian-pitsch said, and .mp3 file is able to be played. And I tried using Android MediaPlayer instead of Android ExoPlayer in v4.3.1, which worked but caused device to be slow when playing.

[timmywil]

Just wanted to point out that I had similar issues with version 4.4.0. I was also not able to play .mp3 streams in Android and downgrading to 4.2.0 fixed it.

[Strate]

Thank you all guys for founding working 4.2.0 version!

[ghost]

Hey there, I have seen everybody's solution of rolling react-native-video back to 4.2.0 to play .mp3 files.

After unlinking, removing through package manager and adding version 4.2.0 and linking again,

I am getting the following error.

"Unable to resolve dependency for ':react-native-video@debug/compileClasspath': Could not resolve com.squareup.okhttp3:okhttp:3.12.0."

Am I being dumb here and just missing the

dependencies { implementation 'com.squareup.okhttp3:okhttp:3.12.0' }

from my app build.gradle ?

Any help would be greatly appreciated :)

My current app/build.gradle below:

`apply plugin: "com.android.application"

import com.android.build.OutputFile

project.ext.react = [
entryFile: "index.js"
]

apply from: "../../node_modules/react-native/react.gradle"

def enableProguardInReleaseBuilds = false

android {
compileSdkVersion rootProject.ext.compileSdkVersion

compileOptions {
    sourceCompatibility JavaVersion.VERSION_1_8
    targetCompatibility JavaVersion.VERSION_1_8
}

defaultConfig {
    applicationId "com.mm_s3"
    minSdkVersion rootProject.ext.minSdkVersion
    targetSdkVersion rootProject.ext.targetSdkVersion
    versionCode 1
    versionName "1.0"
}
splits {
    abi {
        reset()
        enable enableSeparateBuildPerCPUArchitecture
        universalApk false  // If true, also generate a universal APK
        include "armeabi-v7a", "x86", "arm64-v8a", "x86-64"
    }
}
buildTypes {
    release {
        minifyEnabled enableProguardInReleaseBuilds
        proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
    }
}
// applicationVariants are e.g. debug, release
applicationVariants.all { variant ->
    variant.outputs.each { output ->
        // For each separate APK per architecture, set a unique version code as described here:
        // http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits
        def versionCodes = ["armeabi-v7a":1, "x86":2, "arm64-v8a": 3, "x86-64": 4]
        def abi = output.getFilter(OutputFile.ABI)
        if (abi != null) {  // null for the universal-debug, universal-release variants
            output.versionCodeOverride =
                    versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
        }
    }
}

}

dependencies {
implementation project(':react-native-video')
implementation project(':react-native-sound-player')
implementation fileTree(dir: "libs", include: ["*.jar"])
implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
implementation "com.facebook.react:react-native:+" // From node_modules
}

// Run this once to be able to run the application with BUCK
// puts all compile dependencies into folder libs for BUCK to use
task copyDownloadableDepsToLibs(type: Copy) {
from configurations.compile
into 'libs'
}
`

[douglaswissett]

Hey @Jimud1 - I'm also getting this error (Could not resolve okhttp3) when using [email protected] with [email protected]
Did you manage to solve your issue?

[ghost]

Hey @Jimud1 - I'm also getting this error (Could not resolve okhttp3) when using [email protected] with [email protected]
Did you manage to solve your issue?

Sadly Douglas I did not find the solution for this fix, if you have any luck in the meantime be sure to put your results up here, I will do the same if I make any progress. Kind regards, James

[funkyfourier]

Hey @Jimud1 - I'm also getting this error (Could not resolve okhttp3) when using [email protected] with [email protected]
Did you manage to solve your issue?

Sadly Douglas I did not find the solution for this fix, if you have any luck in the meantime be sure to put your results up here, I will do the same if I make any progress. Kind regards, James

The solutions is described here: #1524

Basically, just replace implementation 'com.squareup.okhttp3:okhttp:3.12.0' with implementation 'com.squareup.okhttp3:okhttp:3.12.1' in react-native-video's build.gradle file.

Now, I have not succeeded in getting a (remote) mp3 or m4a file to play on 4.2.0 with RN-0.59.1, not on Android nor iOS. Also tried react-native-video 4.4.0 on RN-0.59.1, but no luck there either.

[ghost]

Hey @Jimud1 - I'm also getting this error (Could not resolve okhttp3) when using [email protected] with [email protected]
Did you manage to solve your issue?

Sadly Douglas I did not find the solution for this fix, if you have any luck in the meantime be sure to put your results up here, I will do the same if I make any progress. Kind regards, James

The solutions is described here: #1524

Basically, just replace implementation 'com.squareup.okhttp3:okhttp:3.12.0' with implementation 'com.squareup.okhttp3:okhttp:3.12.1' in react-native-video's build.gradle file.

Now, I have not succeeded in getting a (remote) mp3 or m4a file to play on 4.2.0 with RN-0.59.1, not on Android nor iOS. Also tried react-native-video 4.4.0 on RN-0.59.1, but no luck there either.

I was able to get the project working on RN0-59.0 but did not try .1, I suggest rolling back to 59.0.

Thanks for the help so far, does anybody know how it'd be best for me to ensure the change within the react-native-video always updates as expected, is it postInstall or preInstall using package.json scripts? or another key word?

[ghost]

To resolve the okhttp issue i created a script as below and added it within a scripts folder
react-native-video-gradle-fix.js
`const fs = require('fs')

try {
var curDir = __dirname
var rootDir = process.cwd()

    var file = `${rootDir}/node_modules/react-native-video/android-exoplayer/build.gradle`;
    var data = fs.readFileSync(file, 'utf8');

    var doLast = "//FixApplied";
    if (data.indexOf(doLast) !== -1) {
        throw "React Native Video Gradle fixed.";
    }
    
    var result = data.replace('implementation(\'com.google.android.exoplayer:exoplayer:2.9.1\') {', 'implementation(\'com.google.android.exoplayer:exoplayer:2.7.3\') {');
    var result2 = result.replace('implementation(\'com.google.android.exoplayer:extension-okhttp:2.9.1\') {', 'implementation(\'com.google.android.exoplayer:extension-okhttp:2.9.3\') {');
    var result3 = result2.replace('implementation \'com.squareup.okhttp3:okhttp:3.12.0\'', 'implementation \'com.squareup.okhttp3:okhttp:3.12.1\'');

    fs.writeFileSync(file, result3, 'utf8');
    console.log('React Native Video Gradle Fix Done');
} catch (error) {
    console.error(error);
}`

then within package.json {
scripts {
"postinstall": "node scripts/react-native-video-fix.js"
}
}

It's a bit of a dirty fix but it works.

Good luck everybody! And thanks for the help!

J

[funkyfourier]

Ok, I managed to get audio only working on both android and iOS.

On iOS, it seems like having defined textTracks breaks playback of files which are audio only. So when I removed the following code audio starts working again:

textTracks={[ { title: "English CC", language: "en", type: TextTrackType.VTT, uri: "https://bitdash-a.akamaihd.net/content/sintel/subtitles/subtitles_en.vtt" } ]} selectedTextTrack={{ type: "title", value: "English CC" }}

On Android, implementing PR 1529 did the trick. I hope that one will get merged with the next release.

On Android subtitles are displayed regardless of the file being audio only or not, but on iOS it just fails silently if the media file is audio only. It would be ideal if perhaps on iOS there could be an onError called with an appropriate description on those cases.

Edit: This is with react-native-video 4.4.0 on RN 0.59.1

[ghost]

Ok, I managed to get audio only working on both android and iOS.

On iOS, it seems like having defined textTracks breaks playback of files which are audio only. So when I removed the following code audio starts working again:

textTracks={[ { title: "English CC", language: "en", type: TextTrackType.VTT, uri: "https://bitdash-a.akamaihd.net/content/sintel/subtitles/subtitles_en.vtt" } ]} selectedTextTrack={{ type: "title", value: "English CC" }}

On Android, implementing PR 1529 did the trick. I hope that one will get merged with the next release.

On Android subtitles are displayed regardless of the file being audio only or not, but on iOS it just fails silently if the media file is audio only. It would be ideal if perhaps on iOS there could be an onError called with an appropriate description on those cases.

Edit: This is with react-native-video 4.4.0 on RN 0.59.1

Funky when you're using local files are you using require('../path/to/file') instead of the uri???

E.g

My bad I read that incorrectly. my bad.

I wish you luck with the object definitions, hope you find the culprit!

[funkyfourier]

Funky when you're using local files are you using require('../path/to/file') instead of the uri???

Yep.

[gazedash]

@funkyfourier does the mp3 files work on 4.4.0 if you don't specify the text tracks? 🤔

[funkyfourier]

@funkyfourier does the mp3 files work on 4.4.0 if you don't specify the text tracks? 🤔

Yes, on iOS it does when not specifying text tracks. On Android it works, regardless of text tracks, if I implement PR 1529.

[wangliang1124]

PR 1529
It works for me. (4.4.0 )
#1529

[funkyfourier]

Just tried the 4.4.1 release, and it is working fine for playing audio only files on android.

[Tautorn]

I'm using the 4.4.4 release and are working for me.
I change the source parameter from this:

<Video
   source={{uri: `file:./assets/sounds/myFile.mp3` }}

to

<Video
    source={require('../../assets/sounds/myFile.mp3')}

Full code:

import React, { memo } from 'react'
import Video from 'react-native-video'

function AudioPlayer({ ref, source }) {
  return (
    <Video
      source={source}
      ref={(player) => {
        ref = player
      }}
      muted={false}
      repeat={false}
      audioOnly={true}
      resizeMode={"cover"}
      volume={1.0}
      rate={1.0}
      ignoreSilentSwitch={"obey"}
    />
  )
}

export default memo(AudioPlayer)

[awinograd]

Same issue trying to use textTracks with an mp3 on [email protected]