playClip

100%

✓ Published0🌍 Public

Last edited Sep 1, 2012

Created on Sep 1, 2012

This example demonstrates a custom method for playing a specific segment of an HTML audio element. It defines `HTMLAudioElement.prototype.playClip`, which takes a start and stop time, sets the current playback position, and uses `setTimeout` to pause the audio after the desired duration. The code relies on the native Web Audio API and DOM methods like `querySelectorAll` to select an audio element and trigger playback. It shows how to extend built-in browser objects for reusable time-based audio control.

AI-generated description

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

62% match

Loading thumbnail…

JS function to change links like <a href="something.wav">sound</a> so that they play when clicked

This example shows a JavaScript function that converts links to .wav audio files on a page into click-to-play controls, so users can listen without leaving the page or losing the link’s context. The code selects all anchor elements whose `href` ends with `wav` using `document.querySelectorAll`, then creates a new `Audio` object for each link and assigns the link’s URL as the audio source. It attaches a `click` event listener that prevents the default navigation behavior and calls `audio.play()` to start playback. The approach uses the native Web Audio API and DOM event handling, with no external libraries.

Aamundo

60% match

Loading thumbnail…

My Test Video

This example shows a video element playing an MP4 file while its audio is amplified to twice the normal volume. The page loads a local video and applies the amplification through the Web Audio API, using `AudioContext`, `createMediaElementSource`, and a `GainNode` to boost the signal. The `createAmplifier.js` script defines a function that connects the video’s audio source to a gain node set to a multiplier of 2, then routes it to the destination. The interface relies on standard HTML5 `<video>` controls, with no external visualization libraries beyond the browser’s native audio processing.

Aamundo

59% match

Loading thumbnail…

A simple method to stop YouTube, Vimeo, and HTML5 videos from playing.

This example demonstrates a JavaScript utility for pausing embedded videos within a webpage. It shows how to stop playback for both HTML5 `<video>` elements and iframe-based players from services like YouTube or Vimeo. The code defines a `stopVideo` function that takes a container element and uses the standard DOM API to pause the video. For iframes, it resets the `src` attribute by reassigning the iframe’s current `src` property, forcing a reload. For native `<video>` elements, it directly calls the `pause()` method. The example relies solely on native JavaScript DOM manipulation, with no external libraries or frameworks.

MMistyBlunch

59% match

Loading thumbnail…

JavaScript事件

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.

Oocean1225

58% match

Loading thumbnail…

Web Audio Sampler v2

This interactive Web Audio sampler loads audio files from a GitHub repository or the user’s local machine, displaying the waveform as an SVG path rendered with d3.line. Users can click the timeline to start playback, shift-click to place up to nine custom cue markers, and use number keys to jump to cues. The code uses d3.v4 for scales, event handling, and transitions, while the Web Audio API handles audio decoding, buffer sources, and looping. A red position line and hover line animate to show playback progress, with looping controlled by a checkbox.

Aalexmacy

57% match

Loading thumbnail…

A couple of changes to example4.html from this great article by Jos Dirksen (http://www.smartjava.org/content/exploring-html5-web-audio-visualizing-sound) are sufficient to get it running in Firefox Aurora.

This example visualizes the frequency spectrum of live audio input, displaying animated bars that respond to the sound’s amplitude and frequency. It works by using the Web Audio API’s `AnalyserNode` to capture real-time data, then rendering the waveform with Canvas 2D drawing. The code includes compatibility fixes for Firefox and Chrome, switching from `createJavaScriptNode` to `createScriptProcessor` and from `noteOn` to `start`. The visible rendering loop updates bars based on the analyser’s frequency data, driven by a `requestAnimationFrame`-style callback.

Aamundo

57% match

Loading thumbnail…

Hook that plays an audio file from a source URL.

This example demonstrates a React hook that controls audio playback from a URL, triggered by a boolean flag and configurable volume and loop settings. The hook creates an `Audio` object via the browser’s Web Audio API and manages its lifecycle with `useEffect`, playing when the flag is true and pausing on cleanup. It also listens for the `ended` event to invoke an optional completion callback. The code relies on React’s `useMemo` and `useEffect` hooks, showing a declarative approach to embedding sound in a visualization without visible UI.

Aabonello

56% match