zohararad / audio5js Goto Github PK
View Code? Open in Web Editor NEWThe HTML5 Audio Compatibility Layer
Home Page: http://zohararad.github.com/audio5js/
The HTML5 Audio Compatibility Layer
Home Page: http://zohararad.github.com/audio5js/
Setting the volume doesn't seem to be working on Safari Mobile. My code works fine on desktop browsers (Tested with chrome and safari), but the same code doesn't work on Safari iOS7.
Hi,
Just tested my project in Opera Browser v12.16, i have this error:
Error: Cannot convert 'this.audio' to object
([arguments not available]) audio5.js:430
([arguments not available]) audio5.js:825
Hope this helps fix this issue
Thanks
Regards
Please add .stop() method.
Need to play online radio
I was trying to play an MP3 file on Firefox, loading it as a blob.
player = new Audio5js({swf_path: "swf/audio5js.swf", throw_errors: true, format_time: false});
player.load('blob:2f927413-235d-c540-8c74-32425c1cc4b5')
player.play()
This doesn't play the blob and throws an error:
Error: Error in Actionscript. Use a try/catch block to find error.
The same works on Chrome, as it uses the HTML5 audio player, but since Firefox HTML5 audio doesn't support MP3, it falls back to the SWF player. It seems the SWF player has a problem playing blobs. Is this something that you would be able to fix?
On an Android browser with this UserAgent string Mozilla/5.0 (Linux; U; Android 4.2.2; uk-ua; PAP3350DUO Build/JDQ39) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30
the onTimeUpdate
doesn't trigger, and that's because this.audio.buffered.length
[audio5.js:579] evaluates to 0
even on a non-streaming (download) file.
AngularJS demo doesn't work in Chrome v.31.0.1650.63 on Windows 8, but works with Firefox and IE
the demos doesn't work actually on both IE10 and chrome, by the way, is there anything special in contrast with audioJS ?
Wonderful work so far! You are AWESOME! It does not work in Android (namely, on my HTC Desire Z Android 2.3 Phone) but there is good news. There are two ways to workaround the missing audio tag support on older android devices:
Apparently this works, as silly as is looks:
[video src="test.mp3" onclick="this.play();"][/video]
Yes, as video. =) But I'm sot sure if this is of any help.
Additionally, Flash sound using mp3s also works great. An example of a functional implementation is the one found in SoundManager2 which I've successfully used on my phone.
More info here, including alternate workarounds:
http://stackoverflow.com/questions/3069124/playing-html5-audio-in-android-browser
Keep up the fantastic work, and know that your efforts are appreciated and highly valued. Thank you.
util.can_play()
returns false for mime_type:mp3, mime_str :audio/mpeg; codecs="mp3".
!!a.canPlayType && a.canPlayType(mime_str) !== ''
returns false.
tested this on chrome 36.0.1985.125, android chrome. Does not happen on Safari. The interesting thing is if you change the mime_str for mp3 to audio/mpeg; codec="mp3" it seems to be working.
[01:55:39.492] uncaught exception: Error in Actionscript. Use a try/catch block to find error.
Getting above error here http://jsbin.com/ogaqus/4/edit
Firefox 20.0 on Mac OS X 10.8.2
Nice work zohararad ! That's a really great cross navigator player !
But I think I found a bug : the seek function for flash player doesn't seem to work
seek: function (position) {
try {
this.audio.seekTo(position);
this.position = position;
} catch (e) {}
}
on line 387
it catches an exception when. Works well for html engine :)
i am trying to play more sounds on one page, one plays it means stop the before sound
but, i think that problem is that it takes some time when the playback is stopped, and new playback is stopped before it starts because i think that the new load is stopped due to before stop command
hope it is understandable?
or do you have some example how to do it?
´´´
(function ($) {
$.extend({
soundsplayer: {
audio5: null,
audioStopping: false,
elem: null,
playsoundtimeElem: null,
init: function() {
var self = this;
self.audio5 = new Audio5js({
swf_path: '/swf/audio5/audio5js.swf',
throw_errors: true,
format_time: true,
ready: function(player) {
this.on('ended', $.soundsplayer.audioStop, this);
this.on('progress', function(load_percent) {
$.soundsplayer.progressupdate(load_percent);
}, self);
this.on('timeupdate', function(position, duration) {
$.soundsplayer.timeupdate(position);
}, this);
$(document).on('click', 'i.playsound', $.soundsplayer.play);
$(document).on('click', 'i.playsoundstop', $.soundsplayer.stop);
}
});
},
timeupdate: function(position) {
$.soundsplayer.playsoundtimeElem.html(position);
},
progressupdate: function(loadPercent) {
$.soundsplayer.playsoundtimeElem.html(loadPercent + "%");
},
audioEnded: function(e) {
$.soundsplayer.audioEnding = false;
$.soundsplayer.audioEnded = true;
},
play: function(e) {
console.log("play");
console.log(e);
var audio5 = $.soundsplayer.audio5;
console.log($.soundsplayer.elem);
// nejdrive zastavime bezici playback
if (audio5.playing || $.soundsplayer.elem) {
// vyhodime z teto funkce
$.soundsplayer.stop();
$.soundsplayer.play(e);
}
else {
console.log("jedu");
var elem = $(this);
$.soundsplayer.elem = elem;
//console.log($.soundsplayer.elem);
var parent = elem.parent();
$.soundsplayer.playsoundtimeElem = $($(parent).find('.playsoundtime')[0]);
//console.log($.soundsplayer.playsoundtimeElem);
// zamen play za stop
elem.removeClass('playsound');
elem.removeClass('fa-play');
elem.addClass('playsoundstop fa-stop');
var url = elem.data('stream');
console.log(url);
audio5.load(url);
audio5.play();
audio5.volume(1);
}
},
stop: function(e) {
console.log("stop");
console.log(e);
var elem = $.soundsplayer.elem;
// zamen stop za play
elem.removeClass('playsoundstop');
elem.removeClass('fa-stop');
elem.addClass('playsound fa-play');
var playsoundtimeElem = $.soundsplayer.playsoundtimeElem;
playsoundtimeElem.html("");
$.soundsplayer.elem = null;
$.soundsplayer.playsoundtimeElem = null;
console.log("porad stop stop");
console.log($.soundsplayer.elem);
$.soundsplayer.audioEnding = true;
$.soundsplayer.audioEnded = false;
var audio5 = $.soundsplayer.audio5;
console.log(audio5);
audio5.seek(0);
audio5.pause();
}
}
});
})(jQuery);
´´´
i think that destroy function of audio5 class should remove audio element from document, otherwise this fault will appear in console
everything work, but if it is considered as a fault, maybe in future could be problem with it? also many programmers dont know what does it mean
what do you think?
No AMD, not buying (:
View th demo link:http://zohararad.github.com/audio5js/
Use IE11,It's work.But in IE8 simulation mode,don't work.
I'm looking for a way to stop the audio from playing as well as downloading in the background. I found the destroyAudio method but it simply deletes the instance which doesn't stop the audio, at least in my version of chrome. Currently, I'm nulling the audio src which creates an uncaught error.
Hi,
i using BackboneJS for build a web audio player with this library,
i write a method for move to start:
stopMusic: function () {
if (this.playing) {
this.seek(0)
}
}
and its doesnt work! but everything like this.pause();
method works fine! but this.seek(0);
doesnt! and there is no error in console.
Is it possible to add a parameter to fade in/out sound when play/pause sound ?
Regards
audio5.load('http://127.0.0.1/test.mp3');
work well. But audio5.load("data:audio/mp3;base64,XXXXXXXXXXXX");
generate Error calling method on NPObject!
Is it be possible to use an audio file encoded in base64 ? How ?
Thank
TheAudioService can be easily injected in any controller or service but how can the audio instance initialization parameters (i.e. swfPath) be set?
Hi, I'd like to use audio5js on a playlist-site (hvsr.net) but I'm experiencing some problems on mobile browsers. I know Apple and Android won't allow the autoplay feature, and it's ok for me to have the playlist streamed only after the user plays the PLAY button. BUT I would like the player to stream a new song when the previous one has ended. On desktop it works, but not on mobile. Please take a look at this demo page:
http://jsfiddle.net/franz976/pyt5k0ma/
thank you
Hi, I can play() an mp3 file, then seek(), and monitor it's position using the timeupdate event. This works as expected.
My problem is the position returns to 0 when I do this process:
1: pause()
2: seek(position + 0.5) // advance the position 1/2 second
3: play()
Imagine the position at 1 is 10 seconds and duration is 20 seconds. After step 2, the position pointer is 10.5 seconds, then, on step 3, the position should remain there, but it returns to 0. Is this a bug?.
After updating the the latest version of Chrome (36.0.1985.125) I'm getting the following error:
TypeError: Cannot read property 'pplay' of undefined
at Object.FlashAudioPlayer.play (http://localhost:9000/components/audio5js/audio5.js:433:17)
at Object.Audio5js.play (http://localhost:9000/components/audio5js/audio5.js:835:20)
at Object.Audio5js.playPause (http://localhost:9000/components/audio5js/audio5.js:850:44)
at http://localhost:9000/bower_components/angular/angular.js:10773:21
at http://localhost:9000/bower_components/angular/angular.js:18981:17
at Scope.$eval (http://localhost:9000/bower_components/angular/angular.js:12608:28)
at Scope.$apply (http://localhost:9000/bower_components/angular/angular.js:12706:23)
at HTMLSpanElement. (http://localhost:9000/bower_components/angular/angular.js:18980:21)
at HTMLSpanElement.jQuery.event.dispatch (http://localhost:9000/bower_components/jquery/dist/jquery.js:4641:9)
at HTMLSpanElement.elemData.handle (http://localhost:9000/bower_components/jquery/dist/jquery.js:4309:46)
No issue with latest versions of Firefox and Safari. Seems to do something with incorrectly falling back to flash instead of using HTML5 audio?
Excellent audio player, hopefully this can be figured out soon.
Hi,
I'm having the following problem: when playing an audio file in chrome, it will play/pause correctly, but once I reach the 'ended' state, the file won't play again (I can't reach the .on('timeupdate' ...) method). This doesn't happen on Firefox, and I'm supposing the navigator must reload the audio file each time I press the play button.
Forcing the load in the on('play'...) method, I then am unable to pause the track, which is also the problem in Firefox.
I'm using AngularJS, and have tried including the ngAudio5.js module, but it doesn't seem to help. Have I forgotten to do something?
It shows me the flowing errors:
TypeError: the object does not support “bind” attribute or function is undefined
SCRIPT1002: Syntax Error
Sorry - please delete.
Calling Pubsub#off
is no-op while Pubsub#trigger
is running:
function handler() {
if (...) {
player.off('progress', handler)
}
})
player.on('progress', handler)
This happens since trigger
empties the channels
array while processing event handlers. So the handler does not appear to be registered while trigger is running.
In most cases you can probably just use one
instead. Still, it's a gotcha.
Audio which plays as expected on iOS7 in safari and as a web app that is 'saved to homescreen' does not play on iOS8 in the homescreen version. Works fine in Safari and all other desktop browsers.
It's likely a known bug w/ iOS8 but thought I would put here in case anyone has insight. http://stackoverflow.com/questions/25977730/video-no-longer-playing-in-ios-8-webbapp-standalone-mode-anyone-found-a-solutio
Hi, I'm using yeoman.io and it makes it pretty easy to pull you repo when you have a bower repo like: https://github.com/angular/bower-angular
This site may help you set one up: http://net.tutsplus.com/tutorials/tools-and-tips/meet-bower-a-package-manager-for-the-web/
Cheers!
It appears that IE11 on Windows 7 only fires the 'play' event when you first play the audio. If you have the audio play more than once, it no longer broadcasts a play event which breaks the tracking of play / pause in audiojs.
My workaround solution was to replace the 'play' listener with 'playing'. IE11 appears to fire this event every time audio.play() is called. Chrome and Firefox also work with using the 'playing' event.
Unfortunately Audio5js does not load in Internet Explorer 8 and 9 (at least) on this page http://zohararad.github.io/audio5js/ (and in my usage scenario with same error).
IE console says:
SCRIPT16385: Not implemented
audio5.min.js, line 2 character 1979
SCRIPT5009: 'Audio5js' is undefined
audio5js, line 450 character 7
When I click on "Load Audio" then nothing happens, text does not change and control elements do not load like they do on other browsers.
Thought I would highlight this since docs said it was tested on IE8+, hopefully it is an easy issue to fix.
Hello,
is it possible to use audio5js in a way that no flash components are used at all. Because even if the html player is used, it seems there is an SWF pixel generated. I realized this through Google Page Speed Inisghts.
So the question: Is there a way to have audio5js purely use html and nothing else?
Hi,
It seems timeupdate from the flash player isn't really acurate :
In the beginning of the song, the duration varies during 5-10 secs before it stabilizes
Moreover sometimes it seems, that it is possible to break the flash module. It stops sending event and it cannot be controled anymore. It happens when there are errors on the callbacks listenings to events for exemple. And more strangely firefox doesn't fires errors when there are errors in the listeners functions
I'm using Firefox 18 for my tests.
Thanks
Could you please help me integrate audio5js with backbone js. I am using handlebars templates, i need to put audio to my backbone view, as internet explorer wont play .wav files.
Sorry, this is not an issue, was just asking a help :) .
Best Regards,
Deepu.
I want when hover the menu list to play only the current sound.
It's possible to stopallsounds?
$('.cms39_accessibility_hover ').mouseover(function (e) {
var text = $(this).text();
var tts ='source';
initAudio(tts);
});
function initAudio(tts) {
var audio5js = new Audio5js({
swf_path: 'http://cdn.jsdelivr.net/audio5js/0.1.7/swf/audio5js.swf',
ready: function () {
this.load(tts);
this.play();
}
});
//audio.destroy();
}
I was getting an error whenever I was calling .load()
audio5.min.js:2 Uncaught Error: Audio Error. Failed to Load Audio
Found the source of this to be setting the source to an empty string when calling destoryAudio()
this.audio.setAttribute('src', '');
https://github.com/zohararad/audio5js/blob/master/src/audio5.js#L509-516
this is a simple html:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="js/audio5.js"></script>
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<button id="play">play</button>
<script type="text/javascript">
$(document).ready(function(){
var audio5js = new Audio5js({
swf_path: 'swf/audio5js.swf',
ready: function () {
this.load('sample3.mp3');
}
});
$("#play").click(function(){
audio5js.play();
});
});
</script>
</body>
</html>
I open it in safari without quicktime on my pc(so the mp3 will play with audio5js.swf, I think), and I click the play button, the mp3 will play, it works. But when I press the button again, it is no sound.
I open this html with firefox and ie, audio5js works well.
what's wrong? it seems like the swf is not correct run at the second time.
The element containing the flash embed code is tried appended to document.body
at a time when document.body
may not be set (depending on when audiojs is initialized).
I.e. the following will break flash fallback:
<html>
<head>
<script src="/js/audio5.js"></script>
<script>
function initAudio () {
var audio5js = new Audio5js({
ready: function () {
this.load('/someaudio.mp3');
this.play();
}
});
}
initAudio();
</script>
</head>
<body>
(...)
Offending line is this: zohararad/audio5js/src/audio5.js#L209
Sometimes it makes sense to subscribe to an event just once. It is also quite common for event libraries to provide such a feature.
The list of the event types currently supported is quite limited. Do you have any plans to support more html5 media events?
this.on('timeupdate', function (duration, position) {
console.log(duration, position);
}, this);
// position, duration
Should output
//duration, position
(or at least also m4a?)
yup, i was right http://en.wikipedia.org/wiki/MPEG-4_Part_14#.MP4_versus_.M4A
Hi,
This problem only happens in Firefox with Flash Player, HTML5 in IE10 works just fine.
At 2:29 of this song: http://www62.zippyshare.com/v/91387527/file.html, when using audio5js.min.js's seek function, the song finishes, cutting out the ending of the song (it should be 3:08 mins long). It's happened to quite a few songs. If you need more examples, just ask. If I don't use the seek function it will play the entire song to the ending, so it seems to be a problem with the seek function.
Thanks.
Legal disclaimer: I don't own that song, it's download may be used for research/educational purposes only.
I'm using audio5js with angular and for some reason format_time only affects position but duration always remains unformatted in seconds. Also i've checked all the demos for ngAudio and they all seem to have the same problem.
Hi!
I'm trying to retrieve the duration of a track, following the Mobile Safari usage pattern.
Inside a canplay
event callback i access player.duration
property, and it always returns 0.
From play button click callback, the player.duration
is 0 for the first time and 30.000181
on subsequent tries, which seems to be the correct value.
But i've also seen player.duration
return 0:30
and NaN:NaN
.
Hi,
I'm trying to run the angular demos but on both of them I get the following error
Error: this.audio is undefined
FlashAudioPlayer.prototype.play@file:///home/lucy/Downloads/audio5js-master/src/audio5.js:430
Audio5js.prototype.play@file:///home/lucy/Downloads/audio5js-master/src/audio5.js:828
Audio5js.prototype.playPause@file:///home/lucy/Downloads/audio5js-master/src/audio5.js:843
Mc/u/<@http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js:70
dc[c]</</</<@http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js:141
Sc/this.$get</e.prototype.$eval@http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js:86
Sc/this.$get</e.prototype.$apply@http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js:86
dc[c]</</<@http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js:140
pc/c/<@http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js:22
m@http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js:6
pc/c@http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js:22
"
Also on a side note is there anyway to state that you don't want a flash fallback?
Thanks
Hey pal,
Thanks for this great lib, it is exactly what I was looking for..
But, I need 2 simultaneous audio players on my APP. For this I was creating 2 instances of Audio5js object, and here is the problem: Apparently the two instances uses the same 'HTML Audio' object, therefore, they are loading and playing exactly the same file.
Maybe this is occuring by my mistake, or maybe isn't your objective to have a multi instance player, but if can review this error, I'll be thankful.
Best regards
I have this piece of coffeescript
@audio5js = new Audio5js
codecs: ['mp4', 'vorbis', 'mp3']
ready: (player) ->
src = switch player.codec
when 'mp4' then m4aSrc
when 'vorbis' then ogaSrc
else mp3Src
@load(src)
The m4aSrc is an audio of .aac extension. When I try to execute this in chrome, Audio5js goes to mp4 source, load the aac file and then complain AUDIO_FORMAT_NOT_SUPPORTED.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.