Skip to main content
SimilarExport ZIP
100%

JavaScript事件

✓ Published2🌍 Public
Oocean1225
Last edited Mar 11, 2020
Created on Mar 8, 2020
Forked from HTML Starter

This example demonstrates a simple user interface for selecting and previewing sound effects using native JavaScript event handling. The page provides a dropdown menu with four sound options and a "试听" (preview) button that triggers playback of a fixed audio file hosted remotely. The code uses the HTML `select` and `button` elements, with an inline `onclick` handler invoking the `playsound()` function. This function accesses the `audio` element by ID and calls its `play()` method, relying on the browser’s built-in HTML5 audio API rather than any external visualization libraries.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This example demonstrates how HTML’s built-in audio element can be embedded directly into a React page, providing native playback controls. The code uses a standard `<audio>` tag with the `controls` attribute to render a play/pause interface and timeline for a horse.ogg file. It relies on React’s JSX syntax to declare the element, with no additional JavaScript libraries or custom audio APIs. The page is minimal, showing only the audio player without surrounding content, highlighting the simplicity of integrating media into a React application.

Oocean1225
69% match
Loading thumbnail…

JS Bin

This example presents an interactive musical keyboard built with the Web Audio API, where each piano-style button corresponds to a specific note (C through B). The page shows how a single oscillator can generate tones by connecting and disconnecting it from the audio destination on button press and release. The code uses `AudioContext`, `createOscillator`, and `createGain` from the Web Audio API, with square-wave synthesis producing the sound. The interface relies on HTML button elements with `onmousedown` and `onmouseup` handlers to trigger the `noise()` and `silence()` functions, which set the oscillator frequency and toggle its connection. The source is a standalone HTML file with embedded JavaScript, rendering no visual data but demonstrating audio-frequency control.

FFrankieFabuloso
65% match
Loading thumbnail…

ButtonClick

This example demonstrates a simple interactive button that triggers a JavaScript function when clicked. The page displays a large “Click me” button centered on a white background, and clicking it logs “Hello JavaScript!” to the browser’s console. The implementation uses plain HTML and CSS for layout and styling, with the click handler defined in `index.js` and loaded via a bundled script. React is listed as the framework, though the visible code relies directly on native DOM event handling rather than React components.

XXin Li
63% match
Loading thumbnail…

Untitled

An interactive sound visualization displays a scatterplot of audio samples, each represented by a draggable circle colored by sound category (Clap, Whoosh, Punch, etc.) using d3.scaleLinear and d3.schemeCategory10. Clicking a circle plays the corresponding audio file via the Web Audio API and WebAudiox library, while a color legend filters highlights by category. Hovering shows tooltips, and the view supports zooming and panning through d3.zoom. The project uses D3 v3 with SVG rendering and imports from d3 modules for scales, axes, drag behavior, and data binding.

Oocean1225
63% match
Loading thumbnail…

Sound Effect Explorer

Sound Effect Explorer plots a collection of WAV file names as labeled points on a dark, space-themed canvas, using precomputed 2D coordinates from a static JSON dataset. The example demonstrates basic D3.js selection and DOM manipulation, setting the text content of a message div to display the first file name. It imports a local ES6 module, `myMessage.js`, to parse the data and relies on `d3.select` from the D3 v5 library, though it does not currently render the full scatter plot or any interactive or force-based layout.

JJaloYang
61% match
Loading thumbnail…

Scatter Plot with Layers

This interactive scatter plot displays sound samples categorized by type, such as Clap, Whoosh, or Gunshot, with each circle representing an audio file. Users can click circles to play sounds, drag them to reposition, and hover to see names. Selecting a legend item highlights matching sounds and dims others. Built with D3 v5, it uses SVG for rendering, d3.zoom for panning and scaling, d3.drag for circle movement, and the WebAudiox library with the Web Audio API for playback.

Oocean1225
61% match
Loading thumbnail…

Scatter Plot with Layers

An interactive scatter plot maps sound effects as colored, draggable circles organized by category using a custom legend. Clicking a circle plays its corresponding audio file, while hover reveals the name via a tooltip. The visualization supports zooming, panning, and keyboard controls to pause playback. Built with D3 v5, it uses SVG for rendering and the Web Audio API alongside jQuery for sound management.

Jjacoyat08
61% match
Loading thumbnail…

Scatter Plot with Layers

This interactive scatter plot visualizes sound-effect files and their layered components as color-coded circles, with each main sound accompanied by its sub-layers. Built with D3 v5, it uses SVG and canvas rendering, enabling users to play audio by clicking circles, pause with the Q key, drag overlapping circles, and zoom or pan the view. A legend filters sounds by category, and hover reveals file names. The visualization incorporates Web Audio API via webaudiox.js for sound playback and jQuery for keyboard event handling.

JJaloYang
61% match