Search the Community
Showing results for tags 'audio'.
Found 17 results
-
Hi GSAPers, I have an interesting challenge. I would like to scroll a div using GSAP. I want to scroll the div vertically using a tween that I can control using the position on an audio track head. I thought I could use the ScrollTo plugin, but I can't seem to understand see how to do it since both the time and the y position are fixed before the plugin initiates. Is it possible to change the div scroll position with ScrollTo interactively?
-
Working on a project whereby a little creativity is called for. I have attached a zip file that contains the results of running forced alignment on a transcript using gentle that aligns an audio file to its transcript. I am looking for a way to "animate" the text as the speech is spoken in order to maximise the focus on the text being spoken as it is spoken. If someone looks away and comes back to it - they should be straight in. It is kind of like subtitles but for audio - except I want it to be as creative as possible. I originally had in mind - simply fading the text in and out whilst scrolling see the links to the examples I have tried out. Please also bear in mind that the actual audio may be over an hour long, so the animation needs to take into account the stream effect of keeping only the current text in focus (related to what is being spoken at the playhead). Any text that is not within 20-25 words of the word being spoken is not really relevant - unless it is and I'm not seeing it. Furthermore there are certain words that the forced-aligner does not pick up and marks them as <unk> - in the example "specialise" is an unknown word because it is spelt wrong. It is an American speaking so it should be spelt with a 'z'. However - there should still be a start and end number for the timeline. { "alignedWord": "<unk>", "case": "success", "end": 16.19, "endOffset": 301, "phones": [ { "duration": 0.69, "phone": "oov_S" } ], "start": 15.5, "startOffset": 291, "word": "specialise" }, http://jsfiddle.net/wuj6xqpz/18/ https://codesandbox.io/s/fervent-villani-vbero https://codepen.io/rustyleaf/pen/oNNwZpB 314a0bf1.zip -
Hello everybody, I have a simple question. Probably my problem is easy to fix, but I can not figure it out... My question is: How to import an audio file / mp3 file to codepen.io? I've seen many examples and I can't import my own audio file in my codepen file. I've download this audio file in mp3 format. This is the audio that I want to use. How do I convert this YouTube audio into this line of code? --> playFile('https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/success.mp3') I hope I am clear enough. Thanks in advance
-
Is it possible to dynamically voice-over text that is animated using the SplitText plugin? If not, is there another way to simulate the effect of someone voicing over text that's being animated?
-
Hey guys, This is not strictly related to the greensock, but also could be I created a banner which has video inside and the video is muted. Whenever my banner is showed, no matter if inside app or inside browser, on IOS, any other sound in background (such as music player) will stop. I know this is default behavior of the IOS (and android as well), but I also saw that some company managed to build banner with video which doesn`t stop background music, but I`m still not sure how. So my questions is - is it possible to workaround somehow this issue inside banner itself via javascript or something ? Maybe something like playing video through the canvas (already tried that didn`t worked), or separating video and audio, dunno. Is there hack or a way to play video that will not affect background music on IOS ? ! Thanks
-
Hi GS, This can be a bit of a difficult question; I hope not. I've created a page with 24 different svg GSAP animated "audio players". (see: www.dennisvangaalen.nl/clockworks ) I used the Semplice module in wordpress as a framework with custom javascript for the players (all SVG is code). Now I've noticed that at the edge of some of the players (of the most right column) a strange slowly appearing white flickering pixel line shows up, only when playing the timeline/audio. It's only doing this in Chrome I believe. I found some things about -webkit-backface-visibility: hidden; -Tried to apply that to the SVG's. -Plus did somehting like this (to see if maybe the SVG is not completely stable in width or so.. and some white of the background appears (?)): .column, .row, .content-block, .sections, .content-container, .column-content, .content-wrapper, .container, #content-holder, .is-content, { background-color: #00000 !important; backface-visibility: hidden; -webkit-backface-visibility: hidden; } - But it won't help - The flickering line is not always visible; it has to do with scaling the browser as well - Therefore I think it's most likely something with the Semplice template - Or Chrome webkit I attached a screendump to show what I see; in case you guys don't see anything happen (which would be great some how I believe) Nonetheless I wanted to share this with you, since I'm breaking my head and maybe some one recognises this? Hope you can help or clear things up for me. (and btw– maybe my JS script is not one of the most efficient; it's how I was able to manage to make it work :-)) thanks, Dennis
-
Just wondering if there is a way to add and play/pause/stop media elements like audio and video to an instance of TimelineLite or TimelineMax and control with the GSAP-JS API? What I was trying to ask was how to sync the media play/pause/reverse with the gsap timeline. Anyone any clues?
-
I've seen some other questions regarding syncing GSAP and audio. I need to be able to create a tool that allows you to establish a region of an audio file as an audio loop, repeat that loop a number of times and then fade out the 'playing' loop after a GSAP animation has finished. In order to do that, I needed a waveform creation tool and didn't have time to build that from scratch. I've been experimenting with Wavesurfer and its regions plugin. It doesn't have a fade-out method so had to create one using TimelineMax's callback method, but it has most of the other pieces needed to make this happen. I've got it working but what I'd like to be able to do is combine GSAP's draggable to turn this into a light version of an audio editor where dragging the edges of an audio block would trim the audio from either edge. A right-click context menu could allow for splitting an audio block into 2 separate blocks. Also, would be very cool to have a draggable fade setting for the ends of the blocks. Thought this might be interesting enough to some that might like to fork the codepen and play around with it. I've forked the codepen myself and am working toward that end.
-
Greetings. I've several audio files in my project (html based animations), playing in different actions. I labeled every sound as; var audio1 = document.createElement('audio'); var audio2 = document.createElement('audio'); audio1 .setAttribute('src', 'audio/audio1.mp3'); audio2.setAttribute('src', 'audio/audio2.mp3'); etc. And playing them during animation with TweenMax (like audio1.play, TweenMax.to(audio1, 1, {volume:0...) I'm trying to mute all sounds if visitor leaves to another tab; with $(window).blur and focus functions, but active audio is changing during animation, so i need to get back to active audio file when user returns the tab. How can i mute the volume of the tab? Thank you very much in advance for all your help.
-
Hi I posted on the forum a few days ago with a problem about synchronizing audio/ video with animation and scrub bars. That issue has been solved and the codepen is here: http://codepen.io/dipscom/pen/rryZaQ Thanks a lot for that, it was a great help. Now I am trying to place my tweens on a timeline at exact points and it isn't working correctly. I have audio, animation and scrub bars all synchronized and working correctly but I want to put tweens at specific points in the timeline so the animation matches the music or narration correctly. I have tried absolute positioning and labels but without success and I was hoping someone could help me with this. The codepen is here: http://codepen.io/anon/pen/RGgJrA In this codepen for example I want the first tween to start at 1 second and the second tween at 2 seconds. Why isn't this working? Many thanks Pebble -
Hi I recently joined and have read some very helpful posts and have got an audio file playing in synchronization with a timeline. What I need specifically is audio with a scrub bar being synchronized with a series of animations which have their own scrub bar. In the code I have put together I have the audio playing and the animations running for the duration of the sound file and I have a scrub bar for the audio and animation which are synchronized together. The problem I have is that the animations are not moving smoothly but are shaking back and forth. I think this is to do with the rate at which they are being updated and I believe things can be improved by using the TweenLite.ticker or the TweenMax.ticker but I am not sure of the best way to implement them. Can you help me to smooth out the movement of these animations. The codepen is here: http://codepen.io/anon/pen/GjWJKA Many Thanks Pebble
-
I am trying to sync a short audio clip to fire at every 180px as a div scrolls horizontally. If this animation were linear, it would be easy...but I am using Power4.easeOut and I am not sure how to synchronize the audio clip with the rate of deceleration in the tween. Any help on this issue would be much appreciated! Essentially, I want the audio clip to fire every time one of those blue squares passes the green line in the middle (view codepen). $(document).ready(function() { // Animation Variables var target = $('.animation--scroll'); var animTime = 3; var random = Math.random() * 170; var rewardItem = $('.rewardItem-container'); // Audio Variables var scrollSound = new Audio('/img/animations/8bit_coin.wav'); // Animation Functions var tween = function(index) { TweenMax.to(target, animTime, { ease: Power4.easeOut, x: (index * -180) + 90 - random }); }; $('.toggle-animation').click(function() { tween(5); // this is where I want the sound to play, but in a loop at a decele // rated rate. scrollSound.play(); }); });
-
Hi all! I come from using TweenMax for AS and have now been tasked with creating a slide presentation with audio without using Flash so it can be viewed on ipads etc. Here are my tasks. I have a narrator discussing different slides much like a powerpoint presentation. Each slide could potentially have its own bulleted animations synced with the audio. Each slide progress automatically. The user can scrub forward or backwards and there is a time-code. I have built one already using timesheets.js but it only allows for slide to slide animations not animations within a particular slide or at least thats what I'm getting. i guess its a two-fold question. Can GSAP be integrated with timesheets Or can I build something like I mentioned above with GSAP alone? Many thanks! Lance
-
Using SoundManager2 library, my sound has already been created. I want to call the play function once my timeline reaches the correct point. Any ideas how I can do this? Thanks in advance. tl.set("#mod5", {visibility:"visible"}, "#mod5") // call soundManager --> soundManager.play('mod5') .staggerFrom("#e5", 0.5, {autoAlpha:0, x:180}) .to("#e6", 0.5, {delay:1});
-
Hi, I'm having trouble with the initial loading of my swf file. - it is visible and audible before it's fully loaded so it shows on stage as though it's paused but the sound is playing. The progress bar is visible on top of the loading swf. How do I make it visible and audible only once it's fully loaded? If I put the following code: event.target.content.visible = false; SoundMixer.soundTransform = new SoundTransform(0); in the progressHandler event the sound and image is hidden but I'm not sure where to restart it once progress equals 1. If I restart it in completeHandler it does exactly what I've mentioned above. Here is my code: Thanks. public class main extends MovieClip { private var currentSWFLoader:SWFLoader; private var swf1:SWFLoader = new SWFLoader("movie1.swf",{container:this,autoPlay:false, width:480,height:480,x:300,scaleMode:"proportionalInside", onComplete:completeHandler,onProgress:progressHandler, onChildComplete:childCompleteHandler}); public function CyberWalkColourSound() { progress_mc.scaleX = 0; } //LOAD MOVIE ONE; private function loadmovie1(event:MouseEvent):void { currentSWFLoader = swf1; currentSWFLoader.load(true); } function progressHandler(event:LoaderEvent):void { progress_mc.scaleX = event.target.progress; trace("progress: " + event.target.progress); progress_mc.visible = true; setChildIndex(progress_mc, numChildren - 1); } function childCompleteHandler(e:LoaderEvent):void { trace(e.target + " loaded"); } function completeHandler(e:LoaderEvent):void { progress_mc.visible = false; currentSWFLoader.rawContent.play(); trace(currentSWFLoader.rawContent + "playing"); }
-
I have an application that uses LoaderMax to load a swf (swf1) with audio. Basically each swf is a chapter in a multi-chapter presentation. When I advance to a chapter (swf2) then return to the previous chapter (swf1) the audio becomes distorted and begins to pop. Is it possible that the previous swf has not been trashed completely?
-
Hi Jack! I'm trying to synchronize sequence of audios obj_snd.attachSound("audio"+idAudio) and obj_snd.start(currentTween.position), with animation MyTimelineLite.append(TweenLite.to(obj_mc, 2 {_x:200, onStart:playAudio, onStartParams:[idAudio]}) Not found any topic about the issue and I think the greenSock (which is great) does not have native support this. I need to detect whether a tween has audio attached, and moving the slideControl (drag slide) resynchronize the audio related to that tween. (I think it would be something like onMidProgress:myFunc). I think the logic is to detect the occurrence of an append (TweenLite. ..), his CurrentProgress and see if it passes onStart: PlayAudio, onStart: Params [idAudio] to synchronize ... Other two questions: 1 - audios that last beyond the animation are not accounted for by the progressBar. 2 - I'm losing onStart event to position the marker of progress midle progress of a Tween. Annex. simple .FLA I appreciate any help, Thanks! sinc_audio_tween.zip
