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.
Related
I am working on a Cordova based app for iOS. I have programmatically added a <video> element to the page and it plays fine. However, if I change the video player's source then I am unable to make the video play again. Using the same code in an Electron app works just fine to swap out video clips on the fly. What can I do to make video source swapping work on iOS?
I vaguely remember in the past that one had to call .load() on the video element in order to reset everything. I am not sure if this is still the case though.
It turns out my issue was that I was changing the source of my captions as well. I was storing a reference to my text track element as a field of my video player element for convenience which worked fine in Electron. For Cordova I guess that stored reference was invalid and caused my function to exit early, thus skipping the part where I called play(). Looking up the text track fresh at time of swapping sources solved the problem.
This is my first post, so please don't get mad if I did something wrong. This is the most complex website I've ever made. When I host it on my own apache server using ngrok, it does the same thing...
So this is the website hosted:
https://zanemechem.000webhostapp.com/
offline:
https://drive.google.com/file/d/0BxbmcM0U2BHcRVBVZzlwMml2QmM/view?usp=sharing
Basically, It is designed so that when you load the website, the images all get put in the cache of your browser, and then when you scroll down, that movement gets translated into changing the gifs which are the background out, and then placing a placeholder png over them.
offline, the website works perfectly, but hosted, the animations load properly, but after playing around with it, they break, and stop loading.
I've played around a bit with a setTimeout function, to make sure the png doesn't load too fast, but it doesn't seem to work.
The files are also very small for gifs, so the size of the file can't be the root of the problem. I believe it has to do with this section of the js:
function createImage(image,gif,previous){
$("firstgif").css({backgroundImage:"none"});
var img = document.createElement('img');
img.src = image;
$("#loader").show();
$("#loader").css({backgroundImage: "url("+previous+")"});
console.log(previous);
$(img).on("load", function(){
setTimeout(function(){$("#loader").hide();
$(gif).css({backgroundImage: "url("+img.src+'#' + Math.random()+")"})},250);
});
I feel like there is something major I am missing but don't have the knowledge to find it. If anyone here possesses that knowledge, help would be much appreciated!
If you need to control the gif playback (gifs only have the option of playing once, looping for a set number of plays, or looping infinitely), you will need an external lib. It will parse the frames and provide you with methods for controlling playback.
There are many options for this, but here is one I've used. It works. https://github.com/buzzfeed/libgif-js
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've searched for many hours trying to find a solution to this problem. I have a HTML5 web page with a background sound file that plays automatically when the page loads, and I'm trying to get a function to run when the sound file finishes playing. I've isolated the code I'm using into a test file to ensure nothing else is causing the problem. The sound plays fine in Firefox (which I'm using to test). From the many solutions I've tried, it seems as though the event attributes in the embed tag simply aren't firing at all.
Here is the test HTML page I'm using (tried putting HTML in here but it wouldn't show up properly, I know it's probably a noob error but I'm in a hurry with this):
Testpage
As you can see the message function works fine, as the "TEST" link indicates when clicked. But the messages for the media events don't appear.
If anyone can help me with this, I'd be most grateful as it's for a time-critical company project. I'd be happy to try alternative solutions to the event attributes, as long as I can get my own Javascript function to run on the sound file reaching its end, I'll be happy!!
Thanks!
Billy
Since you're using HTML5, it would be better to use the <audio> tag rather than <embed>. This works fine in my example:
http://jsfiddle.net/u6dbV/
You can include HTML here, but it has to be marked up as code or it'll get stripped out.