search

motion-canvas / motion-canvas

Visualize Your Ideas With Code
https://motioncanvas.io
MIT License
16.1k stars 605 forks source link

Audio does not show in editor #753

Closed louisPlaire closed 1 year ago

louisPlaire commented 1 year ago

Describe the bug The audio track in the web editor does not appear.

To Reproduce Nothing special to do to reproduce, I followed the quick start tutorial.

Expected behavior Normally the audio track should appear after having these lines of code inserted in "project.ts" :

import audio from './audio-name.mp3'

export default makeProject({ // ... audio: audio, });

Console errors There is no error in the console which is strange.

Package versions: up to date

Apparently the element representing the audio track in HTML exists at least it is shown in the inspector. By modifying some CSS parameters I was able to make it appear, but still not a solution because I could not interact with it and it was stuck outside of my screen.

image

louisPlaire commented 1 year ago

Thanks in advance and also @aarthificial, you did a great job with motion canvas thanks a lot !

aarthificial commented 1 year ago

A few questions:

  1. Is there something specific about your audio file? Is it really long, for example? Can you make sure that it's not corrupted?
  2. Is the audio played correctly in the editor?
  3. Does it work in Chrome?
  4. Can you try running one of our sample projects? They also use mp3 files and appear to be working fine.
louisPlaire commented 1 year ago

Hey @aarthificial

  1. Nothing special about my audio file it is a simple mp3 file and I even tried to use other file formats which did not work too. Depends on what you call "really long" is is 6minutes 18 long. But I don't thing this is the problem, I tried to use a 2mins audio file which changed nothing. It is not corrupted, the problem occurred even with other audio files, and each of them could be read by a media player without any issue.

  2. Yes, the audio is played correctly in the editor even if sometimes It stops playing a few seconds but I think that it is due to the fact that motion canvas has to render a lot of things at the same time so it struggles to render audio.

  3. No, Chrome doesn't change anything unfortunately, I also tried with Edge but it really is not an issue caused by my browser.

  4. This is interesting, I ran one of the sample projects and the audio is appearing correctly, I also could drag it. So I compared the files of your project with mine and regarding what is necessary to import the audio, they are the same... I tried to recreate an empty project and to re import an audio in it and it still does not work. I also tried to use your audio file instead of mine and it is the same thing.

aarthificial commented 1 year ago

Silly question but on the screenshot you provided the waveform is hidden because it doesn't fit on the screen. Have you tried resizing the timeline?

https://github.com/motion-canvas/motion-canvas/assets/64662184/c0a01ae1-a801-4a20-ac7e-0b947d3fd8d7

louisPlaire commented 1 year ago

Your question is not silly, but I am... I didn't know it was possible to resize the timeline this way, and it worked the audio reappeared. I feel a bit dumb but thanks @aarthificial ;)

jasonjmcghee commented 7 months ago

For what it's worth, I just spent about 20 minutes trying to debug this and finally searched issues and found this.

Also had no idea this could be resized and no indication the audio was offscreen.

As it's almost a year later, I bet I'm not the only one.

Figured you'd prefer to know.

It could be nice for new users to have a small indicator if the audio component is outside of the viewport.