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.
Related
[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
I'm looking for a way to create a movie stream that works much like a TV channel. Basically the movies play constantly, whether people are viewing the page or not. Users might come to the page and the current movie is halfway through. Once one movie is done, the next one plays, and so on.
I can't figure out how to make this work, though. Right now I have the player working where every time the page is loaded a random video is chosen and played, but this isn't what I want. Does anyone have any ideas on how I might get this to work?
You need to keep a schedule of your video stream in a storage. This way you know which video is going to be played or be playing at any given time.
Now I know this is not the exact way a streaming service would work but it will get the job done for you. When a user loads a page your system computes which video should be playing at that time. Once the video is chosen, your system should compute the difference in the current time and the time when the video was supposed to start. Then you adjust the seek in your player i.e. you provide the start time of the video to the player as the time difference between the current time and the time when the video was supposed to start. This makes the video play from a position which is not necessarily its start.
Hope this helps.
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.
I am trying to create a feature where a user can change (back and forth) between multiple videos while maintaining a single consistent audio. Think of being able to watch a concert from multiple angles but listening to a single audio. The trouble I am having with this feature is that there can not be a lag between the changes in video or the audio will no longer sync with the videos (especially true after multiple changes).
I have tried two methods, both using html5 only (I would prefer not use flash although I will eventually have a fallback) that have not worked seamlessly, although depending on the browser and hardware, it can come very close.
Basic Methods:
Method 1: Preloading all videos and changing the video src path on each click using javascript
Method 2: Again preloading video and using multiple tags and changing between them using javascript on each click.
Is there anyway to get either of these two methods to work seamlessly without a gap? Should I be using a slight of hand trick, like playing both videos concurrently for a second before revealing the second and stoping the first? Can this just not be done with html5 players? Can it be done with flash?
I have seen this type of question a couple of times with both video and audio with no clear solution, but they were a couple of months old and I was hoping there is now a solution. Thanks for the help.
Worth adding that it is possible with the MediaSource API proposed by Google. This API allows you to feed arbitrary binary data to a single video element, thus if you have your video split into chunks you can fetch those chunks via XHR and append them to your video element, they'll be played without gaps.
Currently it's implemented only in Chrome and you need to enable Enable Media Source API on <video> elements in chrome:flags to use it. Also, only WebM container is currently supported.
Here is an article on HTML5Rocks that demonstrates how the API works: "Stream" video using the MediaSource API.
Another useful article that talks about chunked playlist: Segmenting WebM Video and the MediaSource API.
I hope this implementation gets adopted and gets wider media container support.
UPDATE JUN 2014 Browser support is slowly getting better: (thanks #Hugh Guiney for the tip)
Chrome Stable
FF 25+ has a flag media.mediasource.enabled [MDN]
IE 11+ on Windows 8.1 [MSDN]
Did you find a better way to do that?
I implemented a double-buffered playback using two video tags.
One is used for the current playback, and the second for preloading the next video.
When the video ends I "swap" the tags:
function visualSwap() {
video.volume = video2.volume;
video2.volume = 0;
video.style.width = '300px';
video2.style.width = '0px';
}
It has some non-deterministic behavior, so I am not 100% satisfied, but it's worth trying...
Changing the SRC tag is fast, but not gapless. I'm trying to find the best method for a media player I'm creating and preloading the next track and switching the src via "ended" leaves a gap of about 10-20ms, which may sound tiny, but it's enough to be noticable, especially with music.
I've just tested using a second audio element which fires off as soon as the first audio element ends via the event 'ended' and that incurred the same tiny gap.
Looks like (without using elaborate hacks) there isn't an simple(ish) way of achieving gapless playback, at least right now.
it is possible. you can check this out: http://evelyn-interactive.searchingforabby.com/ it's all done in html5. they are preloading all videos at the beginning and start them at the same time. didn t had time yet, to check how they re doing it exactly, but maybe it helps if you check their scripts via firebug
After many attempts, I did end up using something similar to Method 2. I found this site http://switchcam.com and basically copied their approach. I pre-buffered as the video start time approached and then auto-played as the videos starting point hit. I had the current videos playing simultaneously (in a little div - as a UI bonus) and users could toggle between the videos switching the "main screen view". Since all videos were playing at once, you could choose the audio and the gap didn't end up being an issue.
Unfortunately, I never ended up solving my problem exactly and I am not sure my solution has the best performance, but it works okay with a fast connection.
Thanks for everyones help!
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.