html5-audio | 易学教程

Play a moving waveform for wav audio file in html

阅读更多关于 Play a moving waveform for wav audio file in html

问题 How to create a moving waveform for a audio file/tag in HTML? When play button is clicked,the audio HTML element must be played and a corresponding moving waveform for the same should be generated....how to implement this? <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title id='title'>HTML Page setup Tutorial</title> <script src='riffwave.js'></script> <script type="text/javascript"> function myFunction() { var data = []; // just an array for (var i

Firefox WebAudio createMediaElementSource not working

阅读更多关于 Firefox WebAudio createMediaElementSource not working

问题 Im using the WebAudio API with new Audio() object as a source. The following is a simplified version of what i am doing. This however, doesnt play any sounds in firefox 25.0.1. var context; if(window.webkitAudioContext) { context = new webkitAudioContext(); } else { context = new AudioContext(); } var audio = new Audio(); // This file does seem to have CORS Header audio.src = "http://upload.wikimedia.org/wikipedia/en/4/45/ACDC_-_Back_In_Black-sample.ogg"; var source; function onCanPlay() {

Control multiple html5 audio tracks using a single controller

阅读更多关于 Control multiple html5 audio tracks using a single controller

I am trying to implement a very minimal audio player for a web site. The interface is rather simple. It has a play/pause button, and a mute/unmute button. The problem I have is implementing multiple instances of the same player for different tracks. The javascript for the player is: jQuery(function() { var myAudio = document.getElementById("myAudio"); var btnPlayPause = document.getElementById("btnPlayPause"); var btnMute = document.getElementById("btnMute"); btnPlayPause.addEventListener("click", function() { if (myAudio.paused || myAudio.ended) { myAudio.play(); btnPlayPause.innerHTML = "

Playing audio file returns “Uncaught (in promise)” but works in console

阅读更多关于 Playing audio file returns “Uncaught (in promise)” but works in console

问题 I'm trying to play audio files (I've tried many). All of them are mp3s. I've tested the following on both MAMP localhost and also by just running it in the browser. I use the following javascript: var testSound = new Audio(); testSound.src = "a.mp3" setTimeout(testSound.play.bind(testSound),100) This returns the error: Uncaught (in promise) Trying to catch it: var testSound = new Audio(); testSound.src = "a.mp3" setTimeout(playSound,100) function playSound () { testSound.play().then(response

How to save microphone audio input?

阅读更多关于 How to save microphone audio input?

I need to save microphone input to use later in an AudioElement. I do this to get microphone input: window.navigator.getUserMedia(audio: true).then((MediaStream stream) { # what should go here? }); What should I do to save the audio? There are many horrible stupid examples out there where you are able to play the current audio recording in the current browser window. Is there ever a use case for this. For video I can imaging that one want to build a Skype like application and have a preview window to see if you look stupid on the video, but audio ... I found one good post though: From

Cracks in webaudio playback during streaming of raw audio data

阅读更多关于 Cracks in webaudio playback during streaming of raw audio data

I have a server sending chunks of raw audio over a websocket. The idea is to retrieve those and play them in a way to have the smoothest playback possible. Here is the most important piece of code: ws.onmessage = function (event) { var view = new Int16Array(event.data); var viewf = new Float32Array(view.length); audioBuffer = audioCtx.createBuffer(1, viewf.length, 22050); audioBuffer.getChannelData(0).set(viewf); source = audioCtx.createBufferSource(); source.buffer = audioBuffer; source.connect(audioCtx.destination); source.start(0); }; This works decently well, but there are some cracks in

HTML5 audio tag onplaying even is triggered before audio play in android

阅读更多关于 HTML5 audio tag onplaying even is triggered before audio play in android

I have write a code for highlight text according to audio. In this the logic is when audio start playing we fire a highlight function. which highlight each word for given no of time. And it is working fine for window PC and Desktop. But In android highlight function trigger before audio start that is why audio and highlight is not synchronized. Below is the code. function highlight(start,totalWords,aid) { var wtime = data[start]/defaultPlayback; $("#W"+start).css("color",'yellow'); setTimeout(function (){ $("#W"+start).css("color",''); start++; if (start <= totalWords) {highlight(start

HTML5 Audio Buffer getting stuck

阅读更多关于 HTML5 Audio Buffer getting stuck

I'm using the HTML5 webkitAudioContext to get the realtime levels of a user's microphone using this following code: var liveSource; function getLevel(){ var context = new webkitAudioContext(); navigator.webkitGetUserMedia({audio: true}, function(stream) { liveSource = context.createMediaStreamSource(stream); liveSource.connect(context.destination); var levelChecker = context.createJavaScriptNode(4096, 1 ,1); liveSource.connect(levelChecker); levelChecker.connect(context.destination); levelChecker.onaudioprocess = function(e) { var buffer = e.inputBuffer.getChannelData(0); var maxVal = 0; //

How can audio be extracted from a video in HTML5?

阅读更多关于 How can audio be extracted from a video in HTML5?

问题 How could an audio track be extracted from a video in HTML5 Javascript as the raw audio data? I.e. an array of samples? I am completely new to the HTML5 Video API so an example would be great. 回答1: The Web Audio API is exactly what you want. In particular, you want to feed a MediaElementAudioSourceNode into an AnalyserNode. Unfortunately, the Web Audio API is only implemented in Chrome (somewhat implemented in FF), and even Chrome doesn't have full support for MediaElementAudioSourceNode yet.

Playing multiple sounds in Chrome

阅读更多关于 Playing multiple sounds in Chrome

I am developing a HTML5 game for Facebook. I have the following HTML code: <audio style="visibility: hidden;" controls="controls" id="sound-0"> <source src="sound/sound_new.ogg" type="audio/ogg"/> <source src="sound/sound_new.mp3" type="audio/mp3"/> </audio> <audio style="visibility: hidden;" controls="controls" id="sound-1"> <source src="sound/sound_new.ogg" type="audio/ogg"/> <source src="sound/sound_new.mp3" type="audio/mp3"/> </audio> <audio style="visibility: hidden;" controls="controls" id="sound-2"> <source src="sound/sound_new.ogg" type="audio/ogg"/> <source src="sound/sound_new.mp3"