I'm looking for a basic example for playing an .mp3 or .wav file in the browser. Ideally, also for playing multiple files at overlapping times.
Most libraries I found are concerned with sound synthesis and their examples focus on that topic.
I ended up using cljs-bach, a wrapper around the Web Audio API. It's easier than to use than HTML5 Audio, since it enables the playback of multiple audio buffers at the same time without the need to create multiple DOM nodes.
Here's the kind of example I was looking for:
(ns foo.bar (:require [cljs-bach.synthesis :as b]))
(defonce audio-context (b/audio-context))
(defn playback-mp3
[url]
(let [mp3 (b/connect-> (b/sample url) ; read file using js ajax, including caching
(b/gain 0.5) ; you can chain optional effects here
b/destination) ; loudspeakers
]
(b/run-with mp3
audio-context
(b/current-time audio-context)
3.0 ; play for 3 seconds
)))
; (playback-mp3 "/music/qux.mp3")
Related
First, I tried finding an option to prevent Swiffy from compressing/minifying all the data when doing an export to HTML5 from Adobe Flash Pro. But no dice.
Even if I was able to read the unminified Javascript that Swiffy exported, I don't think there would be a simple function call for the "clickTag".
It's likely defining the variable clickTag in the huge haystack of {index: #, type: #}, and then doing processing each operations to eventually call the window.open() method (or something similar).
This is how it currently outputs (minified)
Does anyone have any clue how Swiffy implements clickTag?
Or what would be the Javascript equivalent that does the same job?
Swiffy uses the core API of the environment where the ad is served. If it's a DoubleClick Rich Media ad, it does use Enabler.exit("url").
If you want to have a better control on your output file, I'd suggest having a look at Google Web Designer. The closest experience to flash development in the HTML5 - JS era.
Google instructions are here, for plain HTML5 (non-swiffy) click tags.
At the bottom of the file is a snippet of code like this:
<script>
var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),
swiffyobject, {});
stage.start();
Add this right before stage.start(); to mimic previous flash behavior. Ensure you use the proper capitalization.
stage.setFlashVars("clickTAG=http://stackoverflow.com");
**Note: Ensure to use url encoding if there are parameters...doesn't seem to like it otherwise
I'm trying to extract the number of videos or audio files present in a Wikipedia article, I searched the APIs but didn't find one for that.
I did notice that when using the API to extract the images for a specific page, the audio file with .ogg extension appears in the list with the images.
http://ar.wikipedia.org/w/api.php?format=xml&action=parse&page=%D8%AD%D9%88%D8%AB%D9%8A%D9%88%D9%86&prop=images&redirects=
I don't know if this case can be generalized, and whether I can use it to count videos and audio files? Does anyone have another way to do this?
Basically all file types are treated equally by the API, but you can fetch the mediatype of each file, and use that to filter out the videos and audio files.
To get the mediatype of a file you would use prop=imageinfo (this will be changed to the more accurate prop=fileinfo in future versions) for each file. As prop=images can be used as a generator, you can get the list of files, and their mediatype, in one single API call, like this:
https://ar.wikipedia.org/w/api.php?action=query&generator=images&titles=%D8%AD%D9%88%D8%AB%D9%8A%D9%88%D9%86&redirects=&prop=imageinfo&iiprop=mediatype&continue=&format=xml
Here images is used as a generator, returning a list of files, and the list of files in its turn is being fed to the imageinfo call.
For each file, you will get something like this:
"2014232": {
"pageid": 2014232,
"ns": 6,
"title": "\u0645\u0644\u0641:06-Salame-Al Aadm 001.ogg",
"imagerepository": "local",
"imageinfo": [
{
"mediatype": "AUDIO"
}
]
}
The mediatype can be any of the following (copy-and-paste from the manual):
UNKNOWN // unknown format
BITMAP // some bitmap image or image source (like psd, etc). Can't scale up.
DRAWING // some vector drawing (SVG, WMF, PS, ...) or image source (oo-draw, etc). Can scale up.
AUDIO // simple audio file (ogg, mp3, wav, midi, whatever)
VIDEO // simple video file (ogg, mpg, etc; no not include formats here that may contain executable sections or scripts!)
MULTIMEDIA // Scriptable Multimedia (flash, advanced video container formats, etc)
OFFICE // Office Documents, Spreadsheets (office formats possibly containing apples, scripts, etc)
TEXT // Plain text (possibly containing program code or scripts)
EXECUTABLE // binary executable
ARCHIVE // archive file (zip, tar, etc)
The default mapping of mimetype <=> mediatype is available here, though it's possible to override this for an individual wiki.
is there any other way to load webaudioAPI except xmlhttprequest ??
it seems xmlhttprequest can only played with local server like "localhost/blablabla"
I want make my game can play locally without any serverside like 'file:///E:/blablabla'
thx
regards
Well, you could recode the file as a data: URL.
what is your goal when using the audio api? There are two things to use as a source. First, you can use the Source node, which you specify 192000Hz PCM. This is decoded by the .decodeAudioData as you know, from an arraybuffer. This takes a lot of time and power. A second much easier method is to use the <audio> tag. You can give this an src (even with file:///E:/blablabla), which loads pretty fast or specify it with a data-url (also much faster than the context.decodeAudioData).
Example HTML:
<audio src="E:/blablabla.mp3"></audio>
Example JS:
window.audiotag = document.getElementsByTagName('audio')[0];
function audioReady() {
window.AudioContext = window.AudioContext||window.webkitAudioContext;
context = new AudioContext();
source = context.createMediaElementSource(audiotag);
source.connect(context.destination);
audiotag.play();
}
audiotag.onload = audioReady();
This simply lets audio play from the audio tag, but when the audio tag gets connected to the sourcenode, it automatically mutes and sends it audio to the audio-api.
Right now I have a website that uses jPlayer to stream mp3s on. I also want to be able to add the functionality of letting SoundCloud stream directly on the player.
I know this is possible, because one of my favorite music blogs hillydilly does this. From looking at their code, I see their setup for their jPlayer has a few extra arguments, namely sc and sclink.
$(".play-music").each(function(){
myPlaylist.add({
title: $(this).attr('data-title'),
artist: $(this).attr('data-artist'),
mp3: $(this).attr('data-mp3'),
url: $(this).attr('data-url'),
sc: $(this).attr('data-sc'),
sclink: $(this).attr('data-sclink')
});
});
I tried looking through the rest of their code, but can't figure out how or where they implement sc and sclink. Any help?
If you look at their playlist they're linking to Soundcloud for the mp3 property of the track:
myPlaylist.setPlaylist([
{
title:"Close Enough ft. Noosa",
artist:"Ghost Beach",
mp3:"http://api.soundcloud.com/tracks/79031167/stream?client_id=db10c5086fe237d1718f7a5184f33b51",
url:"http://hillydilly.com/2012/12/top-20-songs/",
sc:"true"
},
{
title:"Always",
artist:"Jahan Lennon",
mp3:"http://api.soundcloud.com/tracks/80961874/stream?client_id=db10c5086fe237d1718f7a5184f33b51",
url:"http://hillydilly.com/2012/12/top-20-songs/",
sc:"true"
}
HTML5 'streams' are really just MP3s you currently can't protect them like you can with Flash, Silverlight, Quicktime etc. If you open one of those links directly (like http://api.soundcloud.com/tracks/79031167/stream?client_id=db10c5086fe237d1718f7a5184f33b51) it'll download the MP3. So I'm guessing it you set it up the same way it should just work.
If you open up Chrome and its Network inspector (in dev tools: View > Developer > Developer Tools, then click Network) and click next on Hilly's player you can see the track loading in the background.
Actually kreek's answer is only half the story.
If you want to stream soundcloud songs, you first of all need to register your website on the developer page developers.soundcloud.com.
Then use their super cool API with your own key. You can either load the json into your php and generate links there or you load the information with jquery $.getJSON.
When streaming sounds from soundcloud you also want to be sure to properly attribute. The people from soundcloud are very generous to let us use their database like that.
//sorry for the bad links (no credits)
How do I use external JSON...?
http://api.jquery.com/jQuery.getJSON/
http://developers.soundcloud.com/docs/api/buttons-logos
I have a MongoDB database with audio files stored in GridFS. HTML5 audio tag works with a link to a method that gets audio from MongoDB:
$file = $grid->findOne(array('_id' => new MongoId($id)));
header('Content-Length: ' . $file->file['length']);
header('Content-Type: ' . $file->file['file_type']);
header("Content-Disposition: filename=" . $file->file['filename']);
echo $file->getBytes();
All is good but one thing: I can't use slidebar to skip through audio, it only plays from start to end.
Try adding an Accept-Ranges = bytes header. From http://html5doctor.com/html5-audio-the-state-of-play/:
Most audio-capable browsers enable seeking to new file positions
during a download. To allow this, you must enable range requests on
your server. Although enabled by default on web servers such as
Apache, you can verify by checking that your server responds with the
Accept-Ranges header.
Also a X-Content-Duration = length_in_seconds header may help if the files are in ogg format. From https://developer.mozilla.org/en-US/docs/Configuring_servers_for_Ogg_media:
The Ogg format doesn't encapsulate the duration of media, so for the
progress bar on the video controls to display the duration of the
video, Gecko needs to determine the length of the media using other
means.
There are two ways Gecko can do this. The best way is to offer an
X-Content-Duration header when serving Ogg media files. This header
provides the duration of the video in seconds (not in HH:MM:SS format)
as a floating-point value.
Both of these headers help the browser to determine the audio's duration before the file is fully downloaded so that seeking is possible, and the playhead can be positioned properly.
In order to do scrolling, I expect that your script needs to handle ranges as well. Could also supply your (sample) HTML page? Then I can experiment a little bit to see if I can come up with a better answer.