I have integrated following library to my react native project to play audio from URL.
https://www.npmjs.com/package/react-native-sound-player
It is working fine, But, No media control is showing (play/pause/progressbar)
It is just playing audio.
import SoundPlayer from 'react-native-sound-player'
try {
// or play from url
SoundPlayer.playUrl('https://example.com/music.mp3')
} catch (e) {
console.log(`cannot play the sound file`, e)
}
Any suggestions?
Looking at the docs it doesn't seem like there is a UI component in that library.
You probably have to render the buttons yourself and attach an onPress function on them.
Like:
<Button
onPress={()=>SoundPlayer.playUrl('https://example.com/music.mp3')}
title={"Play"}
/>
Related
I'm trying to add a sound effect to my ** splash screen ** with react-native, which I already did with ** react-native-bootsplash **, but I don't know how to add a sound effect.
Thanks in advance, greetings ...
You can use react-native-sound-player to add sound to your splash screen.
On iOS, drag and drop sound file into project in Xcode. Remember to check "Copy items if needed" option and "Add to targets".
On Android, put sound files in {project_root}/android/app/src/main/res/raw/. Just create the folder if it doesn't exist.
import SoundPlayer from 'react-native-sound-player'
try {
// play the file tone.mp3
SoundPlayer.playSoundFile('tone', 'mp3')
// or play from url
SoundPlayer.playUrl('https://example.com/music.mp3')
} catch (e) {
console.log(`cannot play the sound file`, e)
}
I am developing a React Native app. It is a very simple app. I just have to load a website on a webview, which is perfectly done. but my client wants something which I am not sure how to do.
There are some social media buttons on the website. like facebook, twitter etc. so my client wants me to open social media app while user tap on them. suppose user tapped on facebook button then the facebook app will load.
I badly need to know the solution. please help me. thanks in advance.
Make use of onMessage.
Code is untested but you should get the gist of what it's trying to achieve.
Webpage:
function facebookClick() {
window.postMessage("Facebook button done got clicked");
}
var _fb_button = document.getElementById("your-facebook-button");
_fb_button.addEventListener("click", facebookClick, false);
WebView:
[...]
import { Linking } from 'react-native';
[...]
<WebView
onMessage={(event) => {
let message = event.nativeEvent.data;
if(message.includes("Facebook button done got clicked"))
Linking.openURL('fb://page/PAGE_ID');
}}
[...]
You'll have to check out the current protocol's details of each of the social apps you're trying to open via deeplink. Once you've done that, you can further improve your code with Linking.canOpenURL
Im loading an external page with InAppBrowser and it seems like neither loadstart nor loadstop are been fired on Android. My code:
var ref = window.open(url, '_blank', 'location=yes;');
ref.addEventListener('loadstart', function() {
console.log('loadstart!');
console.log(event.url);
});
A couple of checks should fix it for you.
Make sure you load the right cordova-2.x.x.js file
// Platform: android
Include the InAppBrowser plugin in res/xml/config.xml
<plugin name="InAppBrowser" value="org.apache.cordova.InAppBrowser" />
Write the correct white-list tag (differs from iOS)
<access origin="https://domain.com" subdomains="true" />
You really have to include onDeviceReady like in the example files, that did the trick for me.
document.addEventListener('deviceready', app.onDeviceReady, false);
I'm really stuck with an issue. I would like to download a PDF/ZIP formatted file from webview but I can't find any solution/tutorial on the internet, I tried to look webview property class.
i have a webview:
WebView x:Name="webviewIntranet" Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
and my method:
public IntranetPage()
{
webviewIntranet.Navigate(new Uri("http://www.testme.com"));
this.InitializeComponent();
}
I'm able to show the webpage content but nothing happens when a try to download/click to download some files.
First of all some reading about what's new in WebView control
http://blogs.windows.com/windows/b/appbuilder/archive/2013/07/17/what-s-new-in-webview-in-windows-8-1.aspx
as you can see, WebView hanldes different browser events:
It doesn't support showing nothing else than webpages, but WebView.UnviewableContentIdentified event is fired for them
http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.webview.unviewablecontentidentified.aspx
Then you can use file association to throw it to the OS (or do what you need with the file throught the uri... i hope)
void webView1_UnviewableContentIdentified(WebView sender,
WebViewUnviewableContentIdentifiedEventArgs args)
{
Windows.Foundation.IAsyncOperation<bool> b =
Windows.System.Launcher.LaunchUriAsync(args.Uri);
}
WebView can't download file. Microsoft has tried not to be WebView, a replacement of IE browser. See the answer from MSDN forum.
I think you can do this, but there's quite a bit of manual intervention. Using something like the BackgroundDownloader you can download a file that you have the URI for. Is you want to also intercept web view navigation, then there's a few workarounds for that; for example: here
I am looking fore some code allowing me to launch automatically a video after another one.
I'am using the great video.js library, which has a quite complete API. I found some snippet to get an event listener working at the end of the 1st video, but then I cannot launch the second one.
This is working, displaying an alert at the end of the 1st video :
_V_("intro").ready(function(){
this.addEvent("ended", function(){
alert('foo');
});
});
And this is also working, launching a video in fullscreen on page reload :
_V_("leader").ready(function(){
var leader = this;
leader.requestFullScreen();
leader.play();
});
But I can't get the 2nd video launching in fullscreen at the end of 1st video...
Last subtility, I would like to entirely build the 2nd video with javascript, not having to write it and just hiding id with CSS.
Thank you folks !
Elliot
You can simply use the provided 'src' method in the Video.js API, if you want to play a second video right after the first one finishes it would work like this:
_V_("intro").ready(function(){
this.addEvent("ended", function(){
this.src({ type: "video/mp4", src: "http://path/to/second/video.mp4" });
});
});