A cross-browser javascript wrapper for the html5 audio tag

Related tags

audiojs
Overview

audio.js

audiojs is a drop-in javascript library that allows HTML5's <audio> tag to be used anywhere. It uses native <audio> where available and falls back to an invisible flash player to emulate it for other browsers. It also serves a consistent html player UI to all browsers which can be styled used standard css.

It plays mp3s. No ogg. Because, lets be honest, in the real world, no one really exports ogg files. Sadly, that means Opera and Firefox get flash audio. Hopefully they can add mp3 support soon.

Usage

  1. Put audio.js, player-graphics.gif & audiojs.swf in the same folder.

  2. Include audio.js:

     <script src="/audiojs/audio.js"></script>
    
  3. Initialise audiojs:

     <script>
       audiojs.events.ready(function() {
         var as = audiojs.createAll();
       });
     </script>
    
  4. Then you can use <audio> wherever you like in your HTML:

     <audio src="/mp3/juicy.mp3" preload="auto" />
    

Bugs / Contributions

  • Report a bug
  • To contribute or send an idea, github message me or fork the project

Build

On OSX, you should install closure compiler following the instructions in Ben's gist.

Then you can run rake compile from root directory and it will package audio.js into audio.min.js.

Compiling Flash from the command line

If you want to mess around with the flash-side of things, you will need to be able to compile the .as file into a .swf.

Using the Flex SDK (which is free), flash movies can be compiled directly from the command line. It makes life that little bit less painful.

Installing mxmlc

  1. Download and unzip the current 'Milestone Release' 'Open Source Flex SDK' from: http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4

  2. Copy the bin folder to /usr/local/bin/flex/bin/

  3. Add /usr/local/bin/flex/bin/ to your PATH

Compiling the SWF

Run the following command from within the audiojs folder.

mxmlc audiojs.as

Bower package

bower install audiojs

License

audio.js is released under the MIT license. Included MP3 and Ogg files are Creative Commons licensed tracks from Bensound.com

Issues
  • Getting

    Getting "audio.element.pplay is not a function" on line 333 in FireFox 3.6

    Hey,

    I just installed the plugin - works fine on Chrome for me, but it's not working in FF.

    I get this error on line 333 of audio.js:

    "audio.element.pplay is not a function"

    Can you help me identify the error? I apologize in advance if this is a stupid question.

    opened by wildebeast 14
  • IE8 stops on a.element.setVolume(c)};

    IE8 stops on a.element.setVolume(c)};

    I realize that there are too many browsers and versions and settings to guarantee than any code will ALWAYS work, but I am concerned that when IE8 hits this problem my whole page stops running. Is there any way to use a 'try...catch' or similar that IE8 can then continue? Sorry if this is a beginners type question.

    Webpage error details

    User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729) Timestamp: Wed, 30 Nov 2011 00:49:27 UTC

    Message: Object doesn't support this property or method Line: 13 Char: 457 Code: 0 URI: file:///C:/game/game%20engine/music/audiojs/audio.min.js

    opened by EnterTheStory 13
  • multiple playlists

    multiple playlists

    is it possible (and how) to create multiple playlists on one page? tnx

    opened by darije 13
  • Support ogg

    Support ogg

    "It plays mp3s. No ogg. Because, lets be honest, in the real world, no one really exports ogg files."

    That's no reason not to support ogg when it makes sense. Not supporting ogg just for the sake of it, or assuming nobody prefers or uses oggs is rather foolish.

    opened by pyrotechnick 11
  • How to play only one audio file at a time

    How to play only one audio file at a time

    The title pretty much says it all. I need to find a way to only play one audio file at a time and so far I haven't been successful. Any ideas would be much appreciated!

    opened by kasperisager 11
  • Stop other players on a site when clicking play

    Stop other players on a site when clicking play

    Is it possible to somehow stop the current player on a page when clicking on another play button?

    I have four players on a page. So when one Is playing and I click on another player the current player is stoppet and the other one starts.

    opened by kaspar-allenbach 10
  • Chrome - Error loading

    Chrome - Error loading

    If I leave the player open for a while, playing a song or not the player eventually says "Error loading: "[url of mp3]". I can still play/pause as well as change songs via some buttons I have ties to the javascript events. Even if i switch tracks it still has this error BUT will switch the song and continue to play.

    Only seems to happen in Chrome. Any ideas?

    opened by tsquillario 10
  • Not falling back to Flash

    Not falling back to Flash

    Hi, I am testing your new plugin for the audio tag, it is very nicely done, but i am running through a problem regarding the flash fallback, i am testing in OS X 10.5 with FireFox 3.6.13 and Flash Player 10,2,161,22. Any suggestions ? Thanks a lot!

    opened by salvitas 9
  • Workaround broken preload support in Google Chome

    Workaround broken preload support in Google Chome

    At the moment preload support is broken in Google Chrome.

    http://code.google.com/p/chromium/issues/detail?id=16482

    I wondered if it would be possible to workaround this issue by removing the

    opened by buckett 8
  • issue with old versions of IE & Firefox

    issue with old versions of IE & Firefox

    Hi Anthony,

    I'm using your audio.js player on my site (http://soundabu.com) and it works perfectly in all of the browsers' latest versions, but in the older versions of internet explorer and firefox the player doesn't work right. I think it's related to the flash backup. The players on your site http://kolber.github.com/audiojs/ do work on the older browsers so I'm definitely doing something wrong.

    I messed with the CSS but didn't touch anything else and I've named my mp3 files with http:// and the I've tried really hard to figure out why the player on my site isn't working but I've had no luck. I love your player and I want to use it but I need a little help.

    opened by proacktive 7
  • Where exactly do I paste this code?

    Where exactly do I paste this code?

    Hello,

    I am not experienced in coding, but I just customized a template and multiplied the players in my html, but obviously only the first one works (same issue as @hexplor had, here: https://github.com/kolber/audiojs/issues/223).

    I don't know where to paste this snippet provided by @patricklewis, I would appreciate your feedback. Or, if it's hard to explain, and someone can edit the file for me, I don't mind paying for your services.

    My website is online, you can see the issue: www.christinageorgioumusic.com

    Thanks! Christina

    As part of my work to write a script that would play sequentially through a list of multiple audio.js players on a page (representing CD tracks) I was able to call play() on audio.js instances and have the targeted player update to display a 'play' icon:

    $('.audiojs').each(function(index) {
        var container = $(this);
        var audioPlayer = container.find('audio');
    
        audioPlayer.nextPlayerInstance = 'audiojs' + (index + 1);
    
        audioPlayer.on('ended', function() {
            if (audiojs.instances[audioPlayer.nextPlayerInstance]) {
                audiojs.instances[audioPlayer.nextPlayerInstance].play();
            }
        });
    });
    

    Originally posted by @patricklewis in https://github.com/kolber/audiojs/issues/190#issuecomment-180565736

    opened by blunatic28 0
  • Seek to end

    Seek to end

    Is there a way to preload entire track or enable user to seek near the end of track if he need? I found this is the default behaviour in html5 default player.

    opened by peppo1616 0
  • className is an invalid attribute

    className is an invalid attribute

    className is not a valid html attribute

    opened by loominade 0
  • Safari Issue

    Safari Issue

    In safari, File is still getting loaded and even duration is coming as infinity if preload is set to auto and 1 is preload is set to metadata. Please address the issue

    opened by Pooja-N-Swamy 1
  • Bower is going away

    Bower is going away

    Bower is going away. Please, create an npm project.

    opened by spuki 0
  • Accessibility

    Accessibility

    I think it is a no-brainer to support accessibility, especially for screen reader users who listen to audio on the web!

    I submitted a PR here: https://github.com/kolber/audiojs/pull/249

    Please let me know if you have any questions, I am happy to help.

    opened by WoodburyShortridge 0
  • All around accessibility

    All around accessibility

    Thanks for all your nice work. I'd like to add a no-brainer fix. audiojs is completely inaccessible, even the play button is not a button.

    I've added the proper ARIA markup to make the UI tabbable for keyboard users and labels that provide context for screen reader users.

    I've also added listeners to allow keyboard users to play/pause with space or enter, as well as fast forward/rewind the scrubber with arrow keys.

    opened by WoodburyShortridge 0
  • audio.js not working with latest versions of Firefox

    audio.js not working with latest versions of Firefox

    It's not working on my site and even the official website and demos don't work. When trying to play it displays the message "Error loading: "http://kolber.github.io/audiojs/demos/mp..." Is there something with my Firefox (v58) that needs to be changed or setup?

    Thanks for your time!

    opened by VictorStoian 4
  • How to set audio play on sepcial time?

    How to set audio play on sepcial time?

    Hi I want to play audio with special time Ex: the start from 00:00 to 05:00, But i want to play with special time is from 02:00 to 05:00 Can you help me? thanks Bruce

    opened by nhanlq 1
Releases(1.0.1)
Bule-ish CD ripper

cyanrip Fully featured CD ripping program able to take out most of the tedium. Fully accurate, has advanced features most rippers don't, yet has no bl

Lynne 57 Jun 30, 2021
The fre:ac audio converter project

fre:ac - free audio converter fre:ac is a free and open source audio converter. It supports audio CD ripping and tag editing and converts between vari

Robert Kausch 619 Sep 24, 2021
Music player and music library manager for Linux, Windows, and macOS

Quod Libet: an audio library, manager & player Quod Libet is a cross-platform audio / music management program. It provides many ways to view your loc

Quod Libet 1k Sep 16, 2021
Audio Editor

Audacity is an easy-to-use, multi-track audio editor and recorder for Windows, Mac OS X, GNU/Linux and other operating systems. Developed by a group o

Audacity 6.4k Sep 17, 2021
Ear-bending noises and music

Cecilia5 - the audio processing toolbox Cecilia is an audio signal processing environment. Cecilia lets you create your own GUI (grapher, sliders, tog

Olivier Bélanger 129 Sep 21, 2021
🎚️ Open Source Audio Matching and Mastering

Matching + Mastering = ❤️ Matchering 2.0 is a novel Containerized Web Application and Python Library for audio matching and mastering. It follows a si

Sergey Grishakov 490 Sep 24, 2021
Full-featured CD/DVD/Blu-ray burning and ripping application

K3b Version 18.04.0 Thanx for downloading K3b - The CD Kreator These are the features so far: - the most userfriendly interface ever ;-) - thema

KDE GitHub Mirror 73 Sep 18, 2021
Python library for audio and music analysis

librosa A python package for music and audio analysis. Documentation See https://librosa.org/doc/ for a complete reference manual and introductory tut

librosa 4.8k Sep 25, 2021
A Music programming language. Translates source code into MIDI. Includes a player. Supports MIDI-Karaoke. Includes a MIDI analyzer.

Get Started | Features | Screenshots | Programming | CLI | Contribute | License Midica is an interpreter for a Music Programming Language. It translat

Jan Trukenmüller 47 Sep 17, 2021
music library manager and MusicBrainz tagger

beets Beets is the media library management system for obsessive music geeks. The purpose of beets is to get your music collection right once and for

beetbox 10.4k Sep 15, 2021
Python CD-DA ripper preferring accuracy over speed

Whipper Whipper is a Python 3 (3.6+) CD-DA ripper based on the morituri project (CDDA ripper for *nix systems aiming for accuracy over speed). It star

null 554 Sep 19, 2021
OpenSheetMusicDisplay renders sheet music in MusicXML format in your web browser based on VexFlow. OSMD is brought to you by PhonicScore.com.

OpenSheetMusicDisplay (OSMD) A MusicXML renderer for the Browser opensheetmusicdisplay.org About OSMD • Demo • Key Features • Limitations • How to Use

Open Sheet Music Display 806 Sep 24, 2021
Fork of the original rubyripper from code.google.com/p/rubyripper + some bugs fixes

Historical note Introduction Secure rip method How to install MacOS Support FAQ Running all tests Historical note This is an unofficial fork of the or

null 91 Aug 11, 2021
A beautiful cross platform Desktop Player for Google Play Music

Google Play Music™ Desktop Player Windows: MacOS / Linux: Run "Google Play Music" as a standalone desktop app. Never again will you have to hunt throu

Samuel Attard 8.5k Sep 12, 2021
The git repository of the advanced drum machine

Hydrogen drum machine Hydrogen is an advanced drum machine for GNU/Linux, Mac and Windows. It's main goal is to bring professional yet simple and intu

Hydrogen 702 Sep 15, 2021
Automatic command-line mp3/ogg/flac file tagger and renamer

lltag is a frontend to tag (and rename) mp3/ogg/flac files automagically. See http://bgoglin.free.fr/lltag/ for details. lltag installation instruct

Brice Goglin 22 Jul 25, 2021
Mopidy is an extensible music server written in Python

Mopidy Mopidy is an extensible music server written in Python. Mopidy plays music from local disk, Spotify, SoundCloud, Google Play Music, and more. Y

Mopidy 7.2k Sep 17, 2021
Compose music and write score easily in your browser!

inknote Compose music easily in your browser! http://www.michalpaszkiewicz.co.uk/inknote/ Store multiple files, tag them with colours. Made using Type

Michal Paszkiewicz 145 Aug 18, 2021