I can't play a .mp3 file #1442

EzequielDeOliveira · 2019-01-22T23:43:35Z

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',
  }
});

The text was updated successfully, but these errors were encountered:

gazedash · 2019-01-23T12:08:53Z

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

EzequielDeOliveira · 2019-01-23T20:18:13Z

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

kesha-antonov · 2019-01-28T16:55:40Z

Can't play mp3 on Xiaomi Mi8

gazedash · 2019-01-31T09:26:33Z

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 · 2019-02-02T15:52:11Z

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

gazedash · 2019-02-06T13:41:31Z

Downgrading to 4.2.0 make mp3 files work

onitzschke · 2019-02-11T21:13:42Z

@cobarx please reopen this issue, see 2898f8c

brian-pitsch · 2019-02-12T15:45:23Z

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 · 2019-02-21T09:21:14Z

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 · 2019-03-10T18:47:45Z

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 · 2019-03-13T12:53:31Z

Thank you all guys for founding working 4.2.0 version!

ghost · 2019-03-14T09:27:37Z

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 · 2019-03-19T11:19:11Z

Hey @Jimud1 - I'm also getting this error (Could not resolve okhttp3) when using react-native-video@4.2.0 with react-native@0.59.1
Did you manage to solve your issue?

ghost · 2019-03-19T11:52:43Z

Hey @Jimud1 - I'm also getting this error (Could not resolve okhttp3) when using react-native-video@4.2.0 with react-native@0.59.1
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 · 2019-03-19T13:13:27Z

Hey @Jimud1 - I'm also getting this error (Could not resolve okhttp3) when using react-native-video@4.2.0 with react-native@0.59.1
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 · 2019-03-20T14:48:37Z

Hey @Jimud1 - I'm also getting this error (Could not resolve okhttp3) when using react-native-video@4.2.0 with react-native@0.59.1
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 · 2019-03-21T11:45:47Z

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 · 2019-03-22T11:39:32Z

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 · 2019-03-22T11:41:46Z

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 · 2019-03-22T11:43:17Z

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

Yep.

gazedash · 2019-03-22T11:57:19Z

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

funkyfourier · 2019-03-22T12:13:02Z

@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 · 2019-03-30T13:32:28Z

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

funkyfourier · 2019-04-04T10:40:53Z

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

Tautorn · 2020-02-13T21:18:56Z

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 · 2020-10-17T16:52:28Z

Same issue trying to use textTracks with an mp3 on react-native-video@5.0.1

onitzschke mentioned this issue Feb 2, 2019

In android ExoPlayer Audio only play crashes #1460

Closed

dkoo761 mentioned this issue Feb 12, 2019

Android crashes after app is sent to background (running on device) #1211

Closed

SuhairZain referenced this issue in dkoo761/react-native-video-4.2.0 Jun 1, 2019

react-native-video buffer_config for iOS

1983af4

hueniverse added the stale Closed due to inactivity or lack or resources label Apr 22, 2022

hueniverse closed this as completed Apr 22, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

I can't play a .mp3 file #1442

I can't play a .mp3 file #1442

EzequielDeOliveira commented Jan 22, 2019 •

edited

Loading

gazedash commented Jan 23, 2019

EzequielDeOliveira commented Jan 23, 2019

kesha-antonov commented Jan 28, 2019

gazedash commented Jan 31, 2019

onitzschke commented Feb 2, 2019

gazedash commented Feb 6, 2019

onitzschke commented Feb 11, 2019

brian-pitsch commented Feb 12, 2019

wkmcyz commented Feb 21, 2019

timmywil commented Mar 10, 2019

Strate commented Mar 13, 2019

ghost commented Mar 14, 2019 •

edited by ghost

Loading

douglaswissett commented Mar 19, 2019

ghost commented Mar 19, 2019

funkyfourier commented Mar 19, 2019

ghost commented Mar 20, 2019

ghost commented Mar 21, 2019

funkyfourier commented Mar 22, 2019 •

edited

Loading

ghost commented Mar 22, 2019 •

edited by ghost

Loading

funkyfourier commented Mar 22, 2019

gazedash commented Mar 22, 2019

funkyfourier commented Mar 22, 2019

wangliang1124 commented Mar 30, 2019

funkyfourier commented Apr 4, 2019

Tautorn commented Feb 13, 2020

awinograd commented Oct 17, 2020

I can't play a .mp3 file #1442

I can't play a .mp3 file #1442

Comments

EzequielDeOliveira commented Jan 22, 2019 • edited Loading

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

gazedash commented Jan 23, 2019

EzequielDeOliveira commented Jan 23, 2019

kesha-antonov commented Jan 28, 2019

gazedash commented Jan 31, 2019

onitzschke commented Feb 2, 2019

gazedash commented Feb 6, 2019

onitzschke commented Feb 11, 2019

brian-pitsch commented Feb 12, 2019

wkmcyz commented Feb 21, 2019

timmywil commented Mar 10, 2019

Strate commented Mar 13, 2019

ghost commented Mar 14, 2019 • edited by ghost Loading

douglaswissett commented Mar 19, 2019

ghost commented Mar 19, 2019

funkyfourier commented Mar 19, 2019

ghost commented Mar 20, 2019

ghost commented Mar 21, 2019

funkyfourier commented Mar 22, 2019 • edited Loading

ghost commented Mar 22, 2019 • edited by ghost Loading

funkyfourier commented Mar 22, 2019

gazedash commented Mar 22, 2019

funkyfourier commented Mar 22, 2019

wangliang1124 commented Mar 30, 2019

funkyfourier commented Apr 4, 2019

Tautorn commented Feb 13, 2020

awinograd commented Oct 17, 2020

EzequielDeOliveira commented Jan 22, 2019 •

edited

Loading

ghost commented Mar 14, 2019 •

edited by ghost

Loading

funkyfourier commented Mar 22, 2019 •

edited

Loading

ghost commented Mar 22, 2019 •

edited by ghost

Loading