4chan Sounds Player
A floating player for 4chan sounds threads.
Install
Stable, Beta.
There's also an FFmpeg version.
Sound Player UI
A link to open the player is shown at the top and bottom of the page, next to settings. For 4chan X the link is in the header.
Display Modes
The playlist view will list all the sounds in the thread in the order they're playing, with the ability to drag items to modify the order. When hovering over an item the dropdown menu button will show on the right. The menu has an option to remove the item and links to post, image and sound file.
The image only view hides the playlist allowing the image to be expanded.
With 4chan X
Elements of the display, such as icons, are dependent on having 4chan X installed, but it's not a requirement. The icons will fall back to text displays and everything else is purely cosmetic. With it installed the button to open the player is included in the header. You can also choose to show playback controls in the 4chan X header.
Position/Resizing
The player can be moved by dragging the header and resized by dragging bottom right corner of the footer.
Adding Local Files
To add local files (images with [sound=url] filenames) you can either click the + button in the header and select the files you want or drag and drop files onto the player.
If you want to test out a sound before you post it this is a good method of doing so.
Minimised Thumbnail
You can opt to display a thumbnail in the bottom right of the page while the player is hidden. The example here shows a rather large image but the size is customisable.
Tools
Encode/Decode URLS
Just two inputs that let you paste encoded and decoded URLs.
Create Sound Image
This form allows you to select/drop and image and sound. The sound will be uploaded to the selected host and the image will be renamed to include a [sound=url] link to it. You can also select multiple sounds to add to a single image, but keep in mind the filename length limit when doing so. Once complete you can choose to post the created image, download it, or add it to the player. Refer to Hosts for the configuration.
Sound Threads Search
The threads views allows you to search for threads that include a sound in the OP. You can select which boards to search and a search term to filter by.
The threads can be displayed in a table or a pseudo-board.
Settings
Display
- 4chan X Header Controls - When to display the playback controls in the 4chan X header. The available options are always, only with the player hidden, and never.
- Autoshow - Open the player automatically for threads that contain sounds.
- Colors - By default the player will attempt to match the board theme, but you can set your own colors. Selecting "Match Theme" will revert to matching the board theme after making any modifications.
- Limit Post Width - Reduces the widths of posts that are next to the player so they're not hidden beneath it.
- Minimised Display - What is displayed when the player is hidden. You can choose to display a thumnail image (described above) and/or show playback controls in the 4chan X header.
- Threads View Display - How the threads in the thread view are displayed.
- Pause on hide - Pauses the player when it's hidden.
Keybinds
- Keybinds - Keyboard shortcuts can be assigned to control the player and playback. They can be always enabled, enabled only when the player is open, or disabled.
Filter
- Allowed Hosts - Which hosts the player will add sounds from.
- Filters - Sounds or images to ignore. On each line add the URL of the sound or the MD5 of the image you want to filter and they will no longer be added to the player. Lines starting with a
# are ignored. The menu for playlist items has links to add the sound or image to the filters.
Templates
- Footer/Header/Row/4chan X Header Contents - Custom display templates. See Content Templates below for usage.
Hosts
- Hosts - The hosts used for uploading created sounds. Each host is configured using the following properties.
- Name - A unique name used as the host identifier.
- URL - The URL the file is updated to do.
- Data - A JSON object representing the form data posted for the upload. The file is specified by setting
$file as the value.
- Headers - (Optional) Request headers.
- Response Path - (Optional) A path to locate the URL for the uploaded sound in a JSON response.
- Response Match - (Optional) A regular expression where the first match group is used to identify the URL for the uploaded sound in the response text.
- Sound URL - (Optional) A URL that where
%s is replaced the result of the result path or result match.
Various hosts accept a token for user identification. These are typically identified in the default setup as a null value which you can replace with your token.
Content Templates
Certain sections of the UI allow you to provide custom HTML templates. In doing so the replacements below will be made to the provided template.
For the templates other than the row template, values that refer to a sound reference whichever is currently selected (playing/paused). So p:{} in the footer template will show the content if any sound is selected, whereas p:{} in the row template will show the content for only the row that is currently selected.
For both p:{} and h:{} the content given will have the same replacements applied. So, for example, you can choose to only show the menu button when hovering over a row by adding h:{ menubutton } to the row template.
Conditional Display
p:{ <content> } - Only displays the given content if the sound is currently selected.h:{ <content> } - Only displays the given content if the cursor is hovering over the element (i.e. the footer or row). Note that unlike p:{} that fully omits the contents this will instead wrap it in a containing div. If that messes up your template you can set a class of fc-sounds-hover-display on elements to achieve the same effect instead.
Sound Properties
sound-count - The number of songs added to the player.sound-index - The index of the sound (starting from 1).sound-name - The name of the sound.
Links/Buttons
All the values here can be followed by :"" to specify the text, otherwise they will default to icons with 4chan X or short text displays.
playing-link - Jumps to the sound in the playlist.post-link - Jumps to the post for the sound.image-link - Opens the sounds image in a new tab.sound-link - Opens the sounds source in a new tab.dl-image-button - Download the sounds image with the original filename, i.e including [sound=url].dl-sound-button - Download the sound audio itself.filter-image-button - Add the image MD5 to the filters.filter-sound-button - Add the sound URL to the filters.remove-button - Remove the sound from the player. Removed sounds can be re-added using the reload button.repeat-button - Toggles the repeat setting between all, one and none.shuffle-button - Toggles shuffle.playlist-button - Toggles between the playlist and image view.hover-images-button - Toggles hover images in the playlist.add-button - Open the file input to add local files.reload-button - Reloads the sounds from the thread to add any missing files. Useful if you change the allowed hosts or filters but generally all sounds should already be added.view-menu-button - Open the view menu dropdown to switch between views.settings-button - Open/close the settings.threads-button - Open/close the threads search view.tools-button - Open/close the tools view.menu-button - Open the dropdown menu for the sound.close-button - Hide the player.
4chan X Header Controls
For the 4chan X Header Controls template there are extra replacements, in addition to the ones above.
prev-button - Play the previous sound.play-button - Play/pause the current sound.,next-button - Play the next sound,sound-current-time - Display the playback time,sound-duration - Display the track duration.
FFmpeg Version
The FFmpeg version of this userscript makes use of ffmpeg.js licensed under the LGPL.
In order to function as a userscript require a copy is provided wrapped as (function (self) { let module = {}; <ffmpeg.js> self.ffmpeg=module.exports;})(self);.
The FFmpeg version allows the sound image creation tool to accept a webm with audio and split it into separate video and audio files. The benefit of this weighed against the sizable added require is slim if not none, especially considering it's a step you can easily do during the creation of a webm.
