I'm building an audio player but having problems with Chrome.
If I try to jump ahead on the play time Chrome just restarts the clip. I probably just need to be pointed in the right direction. I'm thinking I need to waiting for buffer to load first or something.
Here's the url to the working file:
https://www.christart.com/music/
I'd appreciate any suggestions.
Related
I'm using the Web Audio API to analyse music played from an HTML <audio> tag using createMediaElementSource(). When I now call play()/pause() on the audio element from js I get a delay of up to a couple of seconds before anything happens. Also, when continuing to play after pausing, the audio stutters for a few secs.
My setup is as simple as it gets: A hidden <audio> created using JavaScript, an AnalyserNode attached to it, the analyser connected to the context's destination and then calling play on the Audio-Element. Before someone says it, no it's not the Analyser, it does the same thing without it.
I also noticed a bit of clipping (maybe due to stuttering?) when playing some mp3 files.
I'm using Apache Cordova, but on the Windows 10 UWP platform, so performance in general shouldn't be the problem.
Any idea why or how to circumnavigate that issue?
Try setting the preload attribute, like so;
<audio preload="auto">...</audio>
on your audio element to allow it to prebuffer a little.
I have a problem with the .load(); function on my ipad.
$(this).bind('ended',function() {
$('video').load();
});
It's a simply function for loading the same content after the Video ends.
Any idea why this function does not work on an iPad?
The .load() method loads the video into the tag. The .play() method starts the currently loaded video. One more thing to keep in mind is this, is the video the right format? The tag can load quite a few formats but not every browser can handle every format. iOS browser like iPad/iPhone and even Safari on OSX/Windows can play m3u8 playlists encoded with h264/AAC and mp4 encoded with h264/AAC files but will not play webm, vp8 or avi. So you need to keep all of this in mind when building this type of tag. You might want to look into just building the the player with straight Javascript and supplying multiple tags and then let the browser determine the video it can play. (I did this at a past job and it is a lot easier than you might think) And I believe that with certain browsers you need to reset the 'play pointer' and tell it to start at position 0
jsfiddle [dot] net/nexxuz/XuLCC/15/
(will not let be post link without code)
And I was able to get this working playing multiple videos too (once one ended played another) (Ad video plus content video) also I was able to get a mid roll video working too. (at x seconds into video play another video and then once that video is done resume the first video)
I have a ASP.NET Application and I want to use the tag to play music.
In the codebehind I write this element
<audio controls preload src='PATH/TO/FILE'></audio>
into a literal.
The Problem is that the player crashes when I click in the seek bar at a position behind the current position.
There is no error message or any other response. It just stops working. I have to reload the page to get it working again.
Seeking forward just works fine with small files. With larger files (a song with about 2:00 min) the controls gets grey and nothing happens anymore until I click in the seekbar again nearby the starting position.
When I create a simple HTML File with nothing else than this audio tag the seeking works.
I'm using Chrome v. 26.
I have no idea why this is not working in the ASP.NET application...
The next problem is that I can't use something like soundmanager2 oder jPlayer. I used soundmanager2 before but I had many problems with it.
In the test above I just use one sound file with the audio tag but in the final state there will be a couple of players.
the sound files are created dynamically and so are the players and this happens with ajax. I had to recreate the soundmanager2 object every time and there occurred several problems.
So my hope is that somebody maybe has an idea why the audio tag is not working correctly in the ASP.NET application or give me a hint to something how I can achieve it to have multiple audio players on one page which changes dynamically per ajax.
i finally found it...
This post helped me
The problem was that the path of the sound file was on localhost.
After i uploaded it to a server and used that url it worked.
I think that the reason it worked with the simple HTML testfile was because i used an absolute Path there to the wavfile.
This is how the sound is "stored":
<audio id = "hammer" src="res/sounds/Building/hammer.wav"></audio>
In the actual game (which I use sounds for), I use this to play the sound:
function playSound(soundid)
{
document.getElementById(soundid).currentTime = 0;
document.getElementById(soundid).play();
}
But the sound plays only the first time, and never again!
I tried resetting the "currentTime" in the console to 0, but I literally get this:
>document.getElementById("hammer").currentTime = 0
0
>document.getElementById("hammer").currentTime
0.340...
Why is this happening, how do I fix it?
See this slide and the preceding three slides of Evan Wallace and Justin Ardini's presentation on html5 game dev.
For all the resources to make some awesome games, part of their talk: http://madebyevan.com/gamedevclass/
Audio still doesn't work consistently across all browsers, as of right now:
An element must be reloaded in Chrome or it will only play once
An element must not be reloaded in Firefox or there will be a delay
function playSoundEvent() {
if (window.chrome) elems[index].load()
elems[index].play()
index = (index + 1) % elems.length
}
I had this issue recently with an html5. Worked everywhere except safari.
Using load() before calling play() solved this problem. It also helps to make sure that sound effects do not overlap with heavy clickers when event-handlers trigger sounds.
Here what I used
<audio id="sound-one" preload="auto">
<source src="http://myurl/foo.mp3"></source>
<source src="http://myurl/foo.ogg"></source>
</audio>
click here
Jquery
$("#navigation-id") //this attached is to an element on the page
.mouseover(function() {
sound-one.load();
sound-one.play();
});
A few months before I faced the same issue while developing a Piano in HTML5. When a key was pressed again and again I had to stop, rewind and play the audio on each key press. I used the same code written in this question which worked in Firefox and Safari, but not in Chrome. In Chrome it didn't play again. Finally I had to modify the code to make it work. Added one listener for the event onseeked, then set currentTime = 0 and in the event handler invoked play. This worked for me. Similarly I had to wait for the event of one action before giving next action in many places. It was an old version of Chrome. Later I found out that even some versions of Browsers support Audio, the way each one supports is slightly different. This difference won't be visible if we simply put an audio tag and play the audio, but will experience when we try to control the audio using Javascript. Anyways its all about older versions of Browsers, its much much better in all latest versions. So please check in the latest version of Chrome ( Even my piano worked in Chrome 10 without the code modification ) and regarding the audio format, I would suggest you to keep mp3 and ogg files of your audio instead of single wav file.
For anyone stumbling across this post in the future, the audio tag is really not a great way to do game audio.
I'd highly recommend taking the time to learn the WebAudio API instead.
Rather than repeat a long javascript for playing audio, here is the link: webpages.charter.net/jolove/Includes/play_song.js:.
This plays for any desktop browser (Mac or Windows), but not for my iPad.
Here is the calling website: webpages.charter.net/jolove/Escort_Folder/Dedication_Poem_iOS.html
This is really bugging me, so I would definitely appreciate any help on this, any help at all.
John Love
Not sure exactly what your question is, but you can use the HTML5 <audio> tag which is supported by the iPad. Check out http://developer.apple.com/safaridemos/audio.php or just google "HTML5 audio".
I'm almost forced to conclude that iPad will not play audio files.
Here is a very fresh site, where I use
the audio. But, this time, I got a button that says "cannot play audio file". For the sake of completeness, here is the included webpages.charter.net/jolove/Escort_Folder/js/play_song.js