Play Audio clip onclick of icon in React Native - javascript

[https://i.stack.imgur.com/cNFqa.png][1]
Hi I am trying to make it such that a audio recording would play when my user clicks on the speaker icon in the picture shown above. Would appreciate any help or prompt for me to go towards the correct direction as all I have found on google so far is react native sound players which come with a whole set of play pause and volume buttons which I do not need since the audio clip I have is probably just 2 seconds long which is a simple pronunciation of the number they have selected

You have to use any sound player library to do so.
See: https://www.npmjs.com/package/react-native-sound-player
You can use this library to play audio either local file or from url

Related

Expo-AV play audios after another

I'm using Expo-AV and I'm trying to find a simple way to play 3 audio files after another.
I can't find anything online, does anyone have experience with Expo-AV?
Much appreciated.
The docs for expo-av show an example that plays from a playlist of media. It's a bit of a wordy example since it covers a lot of cases, but it does what you want it to do.
This line shows how they initialize Audio.Sound.createAsync - the third argument is a callback that runs when the playback state changes. In that callback, you can check if the audio has finished playing, and play the next sound if so. The example does this here.

react-native-video play separate video an audio tracks at the same time?

I have alot of tacks from API, which gives me uri's with video and audio separately. Can i somehow play at the same time 2 tracks video and audio with all support of pause play seek etc.?
JSON(simplified) of tracks data:
{
"itag":243,
"url":"https://r3---sn-qvoc5nnxaxjugvopj-qo3e.googlevideo.com/videoplayback?expire=1586766406\u0026ei=5s2TXsCyII-x7QSOiJH4DQ\u0026ip=109.254.29.7\u0026id=o-AOLcChVj-UlAZI2jwEAGI91RICPXewSim1R7QME77QU8\u0026itag=243\u0026aitags=133%2C134%2C135%2C136%2C137%2C160%2C242%2C243%2C244%2C247%2C248%2C271%2C278%2C313\u0026source=youtube\u0026requiressl=yes\u0026mh=Qc\u0026mm=31%2C29\u0026mn=sn-qvoc5nnxaxjugvopj-qo3e%2Csn-n8v7kn7s\u0026ms=au%2Crdu\u0026mv=m\u0026mvi=2\u0026pcm2cms=yes\u0026pl=20\u0026initcwndbps=1306250\u0026vprv=1\u0026mime=video%2Fwebm\u0026gir=yes\u0026clen=6925152\u0026dur=206.082\u0026lmt=1586712912919153\u0026mt=1586744683\u0026fvip=11\u0026keepalive=yes\u0026c=WEB\u0026txp=5531432\u0026sparams=expire%2Cei%2Cip%2Cid%2Caitags%2Csource%2Crequiressl%2Cvprv%2Cmime%2Cgir%2Cclen%2Cdur%2Clmt\u0026sig=AJpPlLswRQIgDdRVs0zHsYYHzZ0wnnfgHKuH6fCSkiEJZ5KIHTe9VB0CIQDadvrh8UEQQ_DceojptEXZRJk9k7ROvmqonIKz7YIh_A%3D%3D\u0026lsparams=mh%2Cmm%2Cmn%2Cms%2Cmv%2Cmvi%2Cpcm2cms%2Cpl%2Cinitcwndbps\u0026lsig=ALrAebAwRAIgFtLclvFXAYZ95mqj9GT2siK0jyWT4I1nzJz7KhSvlIkCIBU2T67wiPEaB2KzIQ-RF8Lh-7IiV22xRrRqYN-ji0fu"
"mimeType":"video/webm;+codecs=\"vp9\""
"itag":251,
"url":"https://r3---sn-qvoc5nnxaxjugvopj-qo3e.googlevideo.com/videoplayback?expire=1586766406\u0026ei=5s2TXsCyII-x7QSOiJH4DQ\u0026ip=109.254.29.7\u0026id=o-AOLcChVj-UlAZI2jwEAGI91RICPXewSim1R7QME77QU8\u0026itag=251\u0026source=youtube\u0026requiressl=yes\u0026mh=Qc\u0026mm=31%2C29\u0026mn=sn-qvoc5nnxaxjugvopj-qo3e%2Csn-n8v7kn7s\u0026ms=au%2Crdu\u0026mv=m\u0026mvi=2\u0026pcm2cms=yes\u0026pl=20\u0026initcwndbps=1306250\u0026vprv=1\u0026mime=audio%2Fwebm\u0026gir=yes\u0026clen=3192185\u0026dur=206.101\u0026lmt=1586712383489185\u0026mt=1586744683\u0026fvip=11\u0026keepalive=yes\u0026c=WEB\u0026txp=5531432\u0026sparams=expire%2Cei%2Cip%2Cid%2Citag%2Csource%2Crequiressl%2Cvprv%2Cmime%2Cgir%2Cclen%2Cdur%2Clmt\u0026sig=AJpPlLswRQIhAKCF9GRv40ium4N-nMAcgHw6uVx4gdWsPGf-pSzv0mFsAiAW79mCjaeI-4MuOxIwrWP4ICd0Yc_SIBloHtCb_oAvOQ%3D%3D\u0026lsparams=mh%2Cmm%2Cmn%2Cms%2Cmv%2Cmvi%2Cpcm2cms%2Cpl%2Cinitcwndbps\u0026lsig=ALrAebAwRAIgFtLclvFXAYZ95mqj9GT2siK0jyWT4I1nzJz7KhSvlIkCIBU2T67wiPEaB2KzIQ-RF8Lh-7IiV22xRrRqYN-ji0fu",
"mimeType":"audio/webm;+codecs=\"opus\""
}
Even though it is theoretically possible (after all these all are playable streams), it is highly unlikely to be able to do it via such a high level component as RN Video. The tracks together do not make together valid streaming media content, so the underlying player has to be prepared to play multi-source asset, which in turn is quite a unusual use case.

How to make a message pop up(hover) when the player hits a time instant?

I want to do the same for a video player, I suspect it is no different because we are talking about the time instants irrespective of the player.
Like in this link.
So, what kind of coding goes into this?
What kind of player would you be using? You see, in the example you posted a link to, you can rewind the player, and the timeline will reset to the current playback time, and so will the messages (comments) popping up. If your player does not support rewinding (time-jump). You could set the timeout when the user clicks play, and then show the popups respectively.
If however your player supports the feature of moving the playhead, first we (at least I do) need to know what kind of player you'd be using. If it is a Audio API based player, I can help you.
Hope this clarifies things for you.

Is it possible to control iTunes from an app (to make it play a paused song)?

I'm looking at the MPMusicPlayerController class, which lets you create an iPodMusicPlayer with a playbackState that is readonly. I'm wondering if there's a way for me to modify the playbackState elsewhere to change the state from MPMusicPlaybackStatePaused to MPMusicPlaybackStatePlaying.
The goal if this is to play iTunes music which is paused by the TriggerIO media player — currently it supports playing audio in your app by pausing background audio, but after my audio plays, I want to continue playing the background audio.
Thanks!
I'm turning my comment into an answer because if found a bit more proof.
My assumption is that you're looking for something like background audio, or an audio overlay. Which, according to, How to play background audio in iOS with Trigger.io?, which was answered by a co-founder of trigger.io, it is not officially supported yet, but on their roadmap.

Multi-channel audio support in the browser on iOS and Android

I found this link to a page here on StackOverflow about "Creating Audio using Javascript in <audio>", and this page on how to play audio on multiple channels. I found that the iPhone supports the audio tag and the Audio object in Javascript to play single channel audio, but is there a way to play audio on multiple channels?
Maybe I'm over complicating this, so this is what I'm trying to do. I want a way to make a graceful audio player in Javascript that supports transitioning from one audio file to another. The way I was going to implement this is to incrementally reduce the volume on one channel while incrementally increasing the volume on the other channel so I'd get a kind of fade effect. Is there a simpler solution to this using only Javascript? I guess another solution would be to reduce the volume to a certain point, start the new audio file on the same channel, then increase the volume again. This circumvents the need for fading, but I would like to fade if at all possible.
Is this possible? I know the HTML5 spec isn't finished yet, but is there some kind of workaround that you know of? Do any of you have ideas for another approach?
From what I can tell from this post about playing audio in the Android browser, this isn't supported yet, but do any of you know if it will support multiple channel audio once the audio tag is supported? Does opera mini support this?
This is an old question I know :).
iOS Safari does not support multiple audio objects playing at the same time. Also, it is not possible for having a fade-in/out effect for iOS, as the only way to change the volume setting is from the hardware itself. Apple decided to give this ability only to the device user. Volume setting is not writable by javascript. It is not even readable (always returns 1).
You can check out the Safari documentation for iOS for more info.
For Android, to be honest I have no idea.
There's no direct way that I know of to have multiple channels on an audio tag, but check out this blog post on using multiple audio tags to simulate multiple channels. http://www.storiesinflight.com/html5/audio.html
I know this is a total hack but try this trick I came up with...
Go to the page below and type on the home row keys to play a blues riff (type multiple keys at the same time etc.)
http://davealger.com/jthump/
The way this works is to create invisible <iframe> components that play a sound before destroying the frame.
I know it is a total hack and I look forward to better HTML 5 multi-channel audio support in the future.

Categories

Resources