No Audio in Hype?

[anon92219816]

Decided to use Hype to make some animations. Admittedly, I've not used hype very much - but I've done a few projects over the years - so I'm confident with the editor and such.

After piecing together the elements for some text animation - I decided to add a couple of sound effects. Grabbed some OGG files - dragged them into the resources, then added some timeline events to play them.

Then I hit spacebar to see how things came together - and POOF. Animations all did what was expected - but no sound.

Changed to MP3 files just in case ... same thing. Tried previewing in Chrome. Nope... no sound there either. Soooooo.... I went through the security and accessibility settings and permissions in the system options. Hype is listed and checked that permissions for file access and all that stuff was as it should be. NOPE - no sound in hype or from hype previews. yet the audio works as it should in all other applications.

shrug
Anyone else have this experience? Is there a fix that I've not been able to find here in the forums?

[Photics]

@anon92219816

Anyone else have this experience? Is there a fix that I've not been able to find here in the forums?

Are you messing with me?

I spent much of the day working on a new YouTube video. It's taking way longer than I thought it would. I was starting to get depressed. I started doubting myself. Is this information really going to be useful?

...and then there you are, you're having trouble with the exact problem I'm trying to resolve. It's related to this...

https://photics.com/free-template-tuesday-1-tumult-hype-coconut/

...and I just updated the template today.

Basically, web browsers are stricter. They don't like auto-playing audio. They block it. Specific user action is required. And here's what I learned today... or forgot and relearned just today HA HA ...once the browser blocks audio in your Hype project, it's over. Subsequent button presses don't unmute the project.

To allow audio, I don't play anything until the user presses something. Another example is Circles with Grandma. It's built with Hype. No audio is played until the start button is pressed. It makes a bloop sound, which unlocks the audio.

I call this technique breaking the sound barrier.

@anon92219816

Grabbed some OGG files

I'm not sure that's the best format... "ogg" | Can I use... Support tables for HTML5, CSS3, etc ...Safari support is lacking. MP3 seems well supported though. Personally, I use m4a.

Although, that is odd about the sound not playing in the Hype app itself. I just tried playing the project locally and was shocked to realize that the coconut hit sound does not play in the Hype app. However, it worked fine in Safari preview and Brave (Chromium) preview.

So, there are two parts to the problem. The first is the local issue. I don't remember if it ever played audio locally. The second issue is playback in the browser. The latter should work. There are two examples mentioned in this thread. The template should play audio in the browser.

Anyway, thanks for posting your problem. It was very encouraging to see tonight, and hopefully the information I posted helps.

[anon92219816]

I'm not really worried about browser compatibility. As I mentioned - i'm just trying to create an animation. My only issue - is that audio isn't playing in the Hype App. So - blatant self promotion aside - I appreciate the coincidental similarity to your 'article'... but i'm not sure how your response really helps.

[Djon]

I’ve used audio a lot in my apps. First if you use it you will only hear it in the browser, not in Hypes preview window. Second you need a button to trigger the audio, but can play it from the timeline. Maybe you can post a simple example, so we can have a look at it?

[Saeta (Saeta Hernando)]

I also use Hype for video animation, mainly, but Hype is intended for the Web and there we have the problems that have indicated the colleagues.
The Hype team knows there is a problem with the sound and they intend to fix it in an upcoming update. No date yet.

Okay, now, to the practical stuff. What is recommended and what I use (and it works very well) is to use an MP4 file with audio only. The video with audio is accepted by Hype in its own layer. I usually put a still image with the opacity at 0. I also disable the video controls.
This allows to synchronize the animation with the audio and the export to video is complete (video and audio).

I hope you find this answer helpful.

[Photics]

@anon92219816

So - blatant self promotion aside - I appreciate the coincidental similarity to your 'article'... but i'm not sure how your response really helps.

I thought you would have liked the story. Oh well. There was a template included in the article there. (The Hype project is playing on that page too.) It totally proves that audio can work in the browser. Wasn't that the main problem?

Changed to MP3 files just in case ... same thing. Tried previewing in Chrome. Nope... no sound there either.

This was the part that made me think it was a browser issue too. I was happy I could help. But now, I'm sad again. HA HA.

@Saeta

Okay, now, to the practical stuff. What is recommended and what I use (and it works very well) is to use an MP4 file with audio only.

See, that's what I said. Well, I wrote .m4a... MP4 file format - Wikipedia ...which is one of the extensions. (Wow, there are a lot of different extensions.)

@Saeta

The Hype team knows there is a problem with the sound and they intend to fix it in an upcoming update. No date yet.

So, this worked before? I was quite surprised to realize that the audio didn't play in the Hype app. I can't remember if it ever did.

@Djon

Second you need a button to trigger the audio

See, I said that too!

That's why I sent the link to the template. If it was blatant self-promotion, I would have posted a link to the YouTube channel.

[Saeta (Saeta Hernando)]

Aquí está la petición, and the mp4 explanation, con la respuesta de @jonathan

Synchronize animation to audio

lately i have often used hype to add animations to explanatory videos. there is a big problem in hype. i can't create an audio track in hype to match movements exactly with audio. so i exported the audio track from final cut as mp4 video and placed the video in hype. then it works very well to synchronize animation with audio. will it be possible in the future to integrate an audio track into hype, like the video track, to synchronize animation timing accurately? that would make hype very inter…

Una solución similar con la explicación más detallada por @JimScott

Play audio in preview for timing (show as a waveform)

@David6816 I found a way to play audio in the Hype interface - no need to Preview. QuickTime 7 Pro makes the following easy, but almost any video editor would suffice I imagine, though the exact steps would not be the same. One possible routine: • Open your soundtrack in QT7. • Paste an image - doesn’t matter what - using “Add Selection & Scale”. • Save. • Extract the soundtrack out of the file & “Save as…” a .mp4 or .mov - basically avoid audio suffixes. • Insert into Hype as a video (or…

Y la última intervención de @Daniel al tema

Play audio in preview for timing (show as a waveform)

A good free tool for dropping in an audio file and outputting a waveform (for usage on Hype's timeline) is: Kapwing — Reach more people with your content Drag your audio file in, and click 'convert to waveform' [Screenshot 2022-08-29 at 8.32.32 AM]

I really hope to see the possibility of working with direct audio in Hype soon.

[Photics]

@Saeta

I really hope to see the possibility of working with direct audio in Hype soon.

Having ventured into YouTube land / Video Editing — wow, no kidding! I thought it would take a day to make a 10-minute video. I'm on day #3 now. I'm at the point where I would like to use some animation created in Hype, but I'm not sure how that's going to work... not well anyway... as I can't easily sync the animation to the recorded narration.

If audio did work in the player (or even better, if Hype projects could export to video — WITH AUDIO) Hype would make short work of this task.

[anon92219816]

Thank you Saeta!!
Perfect.

[Lud]

It's a little bit hacky, but what you could also do to bypass the non-autoplay feature in the browser, is to create a silent MP3 file or use this one - silencemp3.zip (28.0 KB). Then on the first user interaction play that audio. Once you've initialised audio via interaction once, then you should be able to auto-play audio from there.

Another solution would be to create an Audio object with Javascript and play it via the code. I'm not sure, but I don't think the browser will stop the audio then. If you do use Javascript to control the audio, then will also make muting/unmuting easier, especially if it's in sync with a timeline animation. This is because you can turn down the volume of the file playing. Stopping the audio via a timeline action or user action stops the playback and will not continue from where you last stopped if you play the sound again.

It would look something like this:

const audio = new Audio('${resourcesFolderName}/yourAudioFile.mp3')
audio.play()

audio.volume = 0 // to go quiet
audio.volume = 1 // to go full volume

[h_classen (Hans-Gerd Claßen)]

@Lud

It would look something like this:

const audio = new Audio('${resourcesFolderName}/yourAudioFile.mp3')
audio.play()

audio.volume = 0 // to go quiet
audio.volume = 1 // to go full volume

i guess this won't be recognized as userinteraction ...

[Lud]

@h_classen I thought so too actually, but if you execute the Javascript function on button click (or any action), then I guess the function is recognised as a user interaction

But it seems we don't even need to do that to get the audio playing automatically—without user interaction. Starting the audio when clicking on something will always work too, but this is for when you want to play the audio automatically.

I've attached an example Hype file here: AudioExample.zip (82.3 KB). It plays the audio via a timeline action, using a JS audio object

[h_classen (Hans-Gerd Claßen)]

starting audio onclick or touch should always work ...

[Daniel]

@Lud

It's a little bit hacky, but what you could also do to bypass the non-autoplay feature in the browser, is to create a silent MP3 file or use this one - silencemp3.zip (28.0 KB). Then on the first user interaction play that audio. Once you've initialised audio via interaction once, then you should be able to auto-play audio from there.

Yup -- this is a good technique. Even several seconds between the 'touch' or 'tap' that warms up the audio and the automated playback will result in more reliable playback in Safari 14.1.1 desktop and iOS:

warmaudio.hype.zip (186.3 KB)

Test page.

[mikefrost (Michael)]

When Ive used hype for motion graphics, my workflow has been to assemble the audio in premiere, export as mp3 then bring into hype to add the visuals.
I then export the mp4 from hype and bring it back to Premiere where its simple to sync up the audio, because they both start at frame 1