Augmenting image content with sound
Aspects of the present disclosure involve a system and a method for performing operations comprising: receiving, by a messaging application implemented on a client device, input that selects a sound option to add sound to one or more images; in response to receiving the input, presenting a sound editing user interface element that visually indicates a played portion of the sound and separately visually indicates an un-played portion of the sound; receiving an interaction with the sound editing user interface element to modify a start point of the sound; embedding a graphical element representing the sound in the one or more images; playing, by the messaging application, the sound associated with the graphical element starting from the start point together with displaying the one or more images.
1 . A method comprising:
receiving, by an application implemented on a device, a selection of an individual option, from a menu of options, to add sound to one or more images, wherein the sound is selected in response to the selection of the individual option;
receiving an input that selects a capture option that is displayed on top of a real-time video received from a camera;
in response to receiving the input that selects the capture option, adjusting an attribute of a screen in which the real-time video is displayed and automatically initiating playing of the sound from a beginning of the sound while starting to record the real-time video;
displaying inside of the capture option a progress bar that continuously progresses and increases in size to fill a circular area within the capture option with a certain color;
populating the capture option with the certain color to indicate progress in recording the real-time video by progressively increasing the size of the progress bar, the circular area within the capture option being completely filled with the certain color by the progress bar in response to terminating recording of the real-time video;
determining that a stored video comprising the recording of the real-time video is associated with the sound; and
in response to determining that the stored video comprising the recording of the real-time video is associated with the sound, modifying which image modification options are available for selection from the menu of options based on whether the image modification options are associated with respective audio content, a first image modification option of the image modification options comprising a first overlay that is overlaid on an image of the stored video in response to a selection of the first image modification option, a second image modification option of the image modification options comprising a second overlay that is overlaid on the image of the stored video along with a set of sound effects in response to a selection of the second image modification option, the first image modification option being included among the image modification options available for selection from the menu of options;
determining that the second image modification option includes the set of sound effects, the set of sound effects being different from the sound; and
excluding the second image modification option from being displayed among the image modification options available for selection from the menu of options in response to determining that the second image modification option includes the set of sound effects.
2 . The method of claim 1 , comprising:
presenting a sound editing user interface element that visually indicates a played portion of the sound and separately visually indicates an un-played portion of the sound;
receiving an interaction with the sound editing user interface element to modify a start point of the sound to specify the beginning of the sound;
embedding a graphical element representing the sound in the one or more images; and
playing, by the application, the sound associated with the graphical element starting from the start point together with displaying the one or more images.
3 . The method of claim 1 , wherein:
the individual option is displayed on top of the one or more images in one of two visual states, wherein the individual option is displayed in a first visual state to indicate that the sound has been added to augment the one or more images, and wherein the individual option is displayed in a second visual state to indicate that the one or more images have not been augmented with a selected sound; and
a sound editing user interface element comprises a sound waveform that visually indicates a played portion of the sound and separately visually indicates an un-played portion of the sound, a play/stop button to control playback of the sound, and an option to remove the sound.
4 . The method of claim 1 , further comprising:
activating the camera of the device;
displaying, as the one or more images, video captured by the camera; and
displaying the individual option on top of the video captured by the camera.
5 . The method of claim 4 , further comprising:
receiving, as the input, a user input that taps a camera button comprising the capture option;
storing an image captured by the camera;
selecting a time duration from a timer tool displayed on top of the video; and
associating the sound with the stored image such that the sound plays for the selected time duration while the image is displayed.
6 . The method of claim 1 , further comprising:
receiving, as the input, a user input that presses and holds a camera button comprising the capture option;
recording the real-time video captured by the camera of the device until the user releases the camera button;
as the real-time video is being recorded, looping playback of the sound;
as the real-time video is being recorded, animating a sound editing user interface element to visually indicate a played portion of the sound; and
associating the sound with the recorded real-time video such that the sound plays while the video is played back.
7 . The method of claim 6 , further comprising:
terminating recording of the real-time video at a play position of the sound prior to an end position of the sound;
recording a new video segment to play back following playback of the recorded video; and
continuing playback of the sound from the play position while recording the new video segment.
8 . The method of claim 1 , further comprising:
selecting a previously stored video from a plurality of previously stored videos;
displaying the previously stored video together with a sound editing user interface element; and
comparing a duration of the previously stored video to a duration of the sound, wherein the individual option is displayed in response to determining that the duration of the previously stored video is less than a threshold duration.
9 . The method of claim 8 , further comprising in response to determining that the duration of the previously stored video is shorter than the duration of the sound, displaying a first visual indicator that represents a first portion of the sound that will play back together with the previously stored video and a second visual indicator that represents a second portion of the sound that will be excluded from playback of the previously stored video following the first portion.
10 . The method of claim 8 , further comprising in response to determining that the duration of the previously stored video is longer than the duration of the sound, looping playback of the sound while the previously stored video continues to play and displaying a visual indicator that indicates playback of the sound is being looped or playing the sound only once.
11 . The method of claim 1 , further comprising:
displaying a list of sounds in a sound selection user interface in response to receiving the input that selects the individual option; and
receiving a user selection of the sound from the list of sounds.
12 . The method of claim 1 , further comprising:
determining that a user has added a particular sound to a particular image to which an individual image modification has been applied that includes an individual set of sound effects; and
replacing the individual set of sound effects of the individual image modification with the particular sound in response to determining that the user has added the particular sound to the particular image to which the individual image modification has been applied.
13 . The method of claim 1 , further comprising:
displaying a camera button on top of the one or more images;
receiving, as the input, a user input that presses and holds the camera button;
animating the camera button to represent a duration of video being captured by the camera of the device; and
as the camera button is being animated to represent the duration of the video being captured, animating a sound editing user interface element to visually indicate a played portion of the sound.
14 . The method of claim 1 , wherein an amount of time it takes for a displayed shape comprising the capture option to be populated with a different color completely corresponds to a duration of the sound, wherein adjusting the attribute of the screen comprises blurring the real-time video that is displayed prior to initiating recording of the real-time video, wherein the capture option is displayed over the blurred real-time video.
15 . The method of claim 14 , presenting a border around a designated portion of a screen in which the real-time video is displayed in response to receiving the input that selects the capture option to initiate recording of the real-time video.
16 . The method of claim 1 , wherein a rate at which the progress bar increases in size is determined based on a maximum allowable length of the real-time video or a duration of the sound.
17 . The method of claim 1 , further comprising:
presenting a circular line that starts at one position outside of the capture option and terminates at another position outside of the capture option; and
gradually filling the circular line outside of the capture option to indicate the progress in recording the real-time video in response to initiating recording of the real-time video.
18 . The method of claim 1 , further comprising:
displaying the real-time video on a first portion of a display;
in response to receiving the selection of the individual option, presenting, on second portion of the display, an additional menu comprising a plurality of thumbnails representing different sound clips;
dragging an individual thumbnail image corresponding to the sound comprising an individual sound clip of the different sound clips from the additional menu in the second portion of the display to the first portion of the display in which the real-time video is displayed; and
in response to dragging the individual thumbnail image from the additional menu in the second portion of the display to the first portion of the display, associating the sound comprising the individual sound clip with the real-time video.
19 . A system comprising:
at least one processor configured to perform operations comprising:
receiving, by an application implemented on a device, a selection of an individual option, from a menu of options, to add sound to one or more images, wherein the sound is selected in response to the selection of the individual option;
receiving an input that selects a capture option that is displayed on top of a real-time video received from a camera;
in response to receiving the input that selects the capture option, adjusting an attribute of a screen in which the real-time video is displayed and automatically initiating playing of the sound from a beginning of the sound while starting to record the real-time video;
displaying inside of the capture option a progress bar that continuously progresses and increases in size to fill a circular area within the capture option with a certain color;
populating the capture option with the certain color to indicate progress in recording the real-time video by progressively increasing the size of the progress bar, the circular area within the capture option being completely filled with the certain color by the progress bar in response to terminating recording of the real-time video;
determining that a stored video comprising the recording of the real-time video is associated with the sound; and
in response to determining that the stored video comprising the recording of the real-time video is associated with the sound, modifying which image modification options are available for selection from the menu of options based on whether the image modification options are associated with respective audio content, a first image modification option of the image modification options comprising a first overlay that is overlaid on an image of the stored video in response to a selection of the first image modification option, a second image modification option of the image modification options comprising a second overlay that is overlaid on the image of the stored video along with a set of sound effects in response to a selection of the second image modification option, the first image modification option being included among the image modification options available for selection from the menu of options;
determining that the second image modification option includes the set of sound effects, the set of sound effects being different from the sound; and
excluding the second image modification option from being displayed among the image modification options available for selection from the menu of options in response to determining that the second image modification option includes the set of sound effects.
20 . A non-transitory machine-readable storage medium that includes instructions that, when executed by one or more processors of a machine, cause the machine to perform operations comprising:
receiving, by an application implemented on a device, a selection of an individual option, from a menu of options, to add sound to one or more images, wherein the sound is selected in response to the selection of the individual option;
receiving an input that selects a capture option that is displayed on top of a real-time video received from a camera;
in response to receiving the input that selects the capture option, adjusting an attribute of a screen in which the real-time video is displayed and automatically initiating playing of the sound from a beginning of the sound while starting to record the real-time video;
displaying inside of the capture option a progress bar that continuously progresses and increases in size to fill a circular area within the capture option with a certain color;
populating the capture option with the certain color to indicate progress in recording the real-time video by progressively increasing the size of the progress bar, the circular area within the capture option being completely filled with the certain color by the progress bar in response to terminating recording of the real-time video;
determining that a stored video comprising the recording of the real-time video is associated with the sound; and
in response to determining that the stored video comprising the recording of the real-time video is associated with the sound, modifying which image modification options are available for selection from the menu of options based on whether the image modification options are associated with respective audio content, a first image modification option of the image modification options comprising a first overlay that is overlaid on an image of the stored video in response to a selection of the first image modification option, a second image modification option of the image modification options comprising a second overlay that is overlaid on the image of the stored video along with a set of sound effects in response to a selection of the second image modification option, the first image modification option being included among the image modification options available for selection from the menu of options;
determining that the second image modification option includes the set of sound effects, the set of sound effects being different from the sound; and
excluding the second image modification option from being displayed among the image modification options available for selection from the menu of options in response to determining that the second image modification option includes the set of sound effects.