Streaming a WAV file. (NOT recording) - javascript

I'm trying to play a .wav as background music (It's match ambience) but I'm having problems getting it to stream, it's 20meg so I don't really want to make people wait for it to download... could be waiting 30seconds!
I had it working fine in IE but FF doesn't seem to like any code that works in IE :)
I was using an object to hold the sound which worked in IE. I also had some javascript fading the sound in and out when I wanted to.
Could anyone please provide me with a code snipplet for cross browser compatability for playing wav files without the need of additional plugins (if possible) and without using jquery or prototype or anything similar.

Try this:
<!DOCTYPE html>
<html>
<body>
<audio controls="controls">
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mp3" />
Your browser does not support the audio element.
</audio>
</body>
</html>
But you should compress the wav file to mp3. You can see a live demo here.

Related

How to make HTML audio tag work in Opera?

i'm trying to add autoplay audio in my html page and i already tried embed and audio with and without controls and optional attributes, and absolute path. Tried different formats, though i know that Opera supports .ogg. My last try is here:
<audio controls id="music1">
<source src="./models/laughing.ogg" type="audio/ogg"/>
</audio>
html page and audio file are located like this:
if i press play button audio is played, but when i start my entire project the button is covered (as should be). And anyway i want it to be autoplay so
My Opera is the last version, Windows
Autoplay doesn't typically work. You need some sort of user interaction, like a click.
There is nothing you can really do about this. It's a browser "feature" to prevent ads from playing audio in the background.
<audio controls autoplay>
Try adding "autoplay" inside the voice tag.

enable download button for html5 audio player in chrome

I have an audio element on a page that is added dynamically using javascript in the dom.
The outputted html is such:
<audio preload="auto" controls="controls">
<source src="https://urlofmp3.mp3" type="audio/mp3">
</audio>
when I view this audio element on the page it looks like this:
As I understand Chrome is supposed to automatically put a download button on the right hand side... but for whatever reason it's not there. I've been able to find lots of sites telling me how to turn the download button off, but is there a way to explicitly turn it on?
const audio = `<audio preload="auto" controls="controls">
<source
src="https://archive.org/download/testmp3testfile/mpthreetest.mp3" type="audio/mp3">
</audio>`;
document.getElementById('song').insertAdjacentHTML('beforeend', audio);
<div id="song"></div>
If you put a real MP3 file as src is showing the download button even adding the audio element dinamically with Javascript. I suppose that it checks and preloads the file and when success fills the controls...
i had the the same problem. i finally found a solution for this.
at first i just tried to let it download the .ogg .wav or .mp3 file this made it open in another tab in my browser but did not let me download it. now i treid to put the .oggfile into a zip folder and try to let it download the folder which was the solution for my froblem.
the code i use for this:
<button>
<a href="HooniganProds\songs.zip" download>Click to Download!</a>
</button>

Video background not displaying properly on some computer

I am meeting an error on my website and I can't put my finger on it, the custom video background I'm trying to implement works on some computers and doesn't on the some other.
It is not a problem of browser version since I tried it on 5 computers with the same versions and there is still 2 computer who fail to run the javascript on this specific area (it either works on all browser or the javascript goes off on all plateforms).
I think it is a problem of computer but what should I in order to make the JS of the video background work ? (If you can't pause or play the video, or if it launch as soon as you enter the page then you also have this issue)
Here is the website : www.fyz.ch/VR
Any thoughts ?
Maybe you need to convert the video in multiple file formats (mp4, webm and ogv).
I think you made a wrong structure for it and put a source tag outside of the video tag.
Add them like this :
<video>
<source src="video.mp4" type="video/mp4" />
<source src="video.webm" type="video/webm" />
<source src="video.ogv" type="video/ogg" />
Your browser doesn't support the video tag
</video>
Moreover, it seems like you added the autoplay attribute to the video tag. So it's the normal behavior for the video to launch itself as soon as the user enters the site.
Could you provide some code to be sure of what your problem is ?

What am I missing to have this appear in IE8?

I have several video-js player code on a web page like this:
<video id="vid1" class="video-js vjs-default-skin" width="140" height="120"
controls poster="/1video/countdown.jpg" data-setup='{}'>
<source src="/video/test.mp4" type="video/mp4" />
</video>
And this in the header:
<link href="/video-js-4.12.5/video-js/video-js.css" rel="stylesheet">
<script src="/video-js-4.12.5/video-js/video.js"></script>
<script>videojs.options.flash.swf = "/video-js-4.12.5/video-js/video-js.swf"</script>
What do I need to add so the players appear in IE8? Any help will be appreciated.
Unfortunately, Internet Explorer 8 does not support the <video/> tag that you are using.
Source
Update
video.js should fall back to Flash when loaded in a browser that does not support HTML5 video (e.g. IE 8). There could be several reasons why yours is not working:
Ensure that poster image is set
Use a self hosted version of video.js rather than the CDN. Then ensure that your path to video-js.swf is accurate within the JS file
Ensure that your flash plugin is up-to-date
No. 2 might be most pertinent to your issue. I see that in your header you attempt to change an option. Perhaps try removing that and just ensure that the file path in video.js is accurate (open the JS file and search for video-js.swf).

audio tag works in chrome but not in Firefox

This code works fine in Chrome But it doesn't produce audio in Firefox. I'm testing from file:// and not http://. I placed an alert in the playSound function and passed it the audio parameter. It returned the audio div id for all buttons like it should. I'm stumped at this point and any suggestions would be great.
<li id="siren" class="app_button">
<img src="img/siren.png" alt=""
name="siren_pressed" width="102" height="102"
onmousedown="press('siren_pressed')"
onmouseup="release('siren_pressed'), playSound('siren_audio')">
<audio id="siren_audio">
<source src="audio/siren.ogg" type="audio/ogg">
<source src="audio/siren.mp3" type="audio/mpeg">
</audio>
</li>
/* Javascript is in a seperate folder */
function playSound(audio)
{
var sound = document.getElementById(audio);
sound.play();
}
Solved! It was the .ogg files. I originally converted them from mp3 to ogg using ffmpeg in the command line. Testing audio on its own in the browser showed issues with ogg on both chrome and firefox. I downloaded a different sound converter and tried again. This time the ogg files play with out issue on both browsers. Thanks #Golmaal for pointing me in the right direction.

Categories