I am trying use JS to playback some sounds. What i want to do is have piece of music playing but after a certain time replace it with another audio file. I thought the most effective way would be to reuse the same audio object, but it seems to not kill the original sound so all gets messy. What is the best way to do this?
My code is below, all im doing is passing in a new source at a certain time
function inGameSndCreate(src) {
inGameSnd = new Audio(src)
inGameSnd.loop = true;
inGameSnd.play();
}
thanks in advance
I expect you'll need to change the source in the DOM using JavaScript. The following should work.
document.getElementById('audio_id').src = 'different_file.wav';
Related
I'm trying to build some thing like a video gallery which you can select a video to show up by clicking on its thumbnail. Now I'm at phase of loading appropriate subtitles for the chosen video. Thanks to google I understand that videojs has a method to help me called addTextTrack() but unfortunately there is not a good sample or documentation for it. After all I tried to find its parameters and behavior via reading the video.dev.js codes. but as I understand this method has just three params (kind, label, language) and the thing that I didn't understand is that: How can I set the src to load the subtitle file. I think its a bug and it doesn't work properly and I want to report it if you're agree with me.
The following code adds cc icon to the player but it doesn't show the subtitle (How can it be shown when I didn't tell him the URL to load)
var myPlayer = videojs('video-id');
myPlayer.addTextTrack('captions', 'En', 'English');
I checked videojs 5.0.0 addTextTrack method and there wasn't any significant changes.
After about a month without any answer to my question, I don't know yet why addTextTrack() doesn't work properly. But thanks God, I found a way to achieve my goal:
To dynamically changing all text tracks
var oldTracks = player.remoteTextTracks();
var i = oldTracks.length;
while (i--) {
player.removeRemoteTextTrack(oldTracks[i]);
}
myNewTracks.forEach(function(track) {
player.addRemoteTextTrack(track);
});
The text track did never get updated dynamically and after a long search, I had found a solution for my problem. When I change the video source I replace the text track and set it on mode="showing":
let player = videojs('first-player');
player.addRemoteTextTrack({
kind: 'captions',
src: 'my-track-path.vtt',
mode: 'showing'
}, false);
I am trying to figure out the method for switching audio tag source. In this example I am getting the source from a list, however I'm not sure how to do it.
Here is the fiddle: jsfiddle.net/4vrR2/9
Any advice on making it work would be appreciated :)
To change the attribute you need to specify setAttribute("src",value) instead of src:
http://jsbin.com/zexoweyu/1/edit
function changeSong() {
var element = document.getElementById("audioPlayer")
element.setAttribute("src","magic");
}
PS: To see the change in the DOM open the browser devtools, since JSBin will not reflect the change in the source code tab.
I would like to know if it is possible to unload an image from an HTML page and free its memory occupation with some Javascript instructions. Say an image is already displayed on the screen. Say I need to unload it to save memory (reason is not relevant here). Can I do it with Javascript?
The comments on your question are correct, you can remove it from the DOM, but the browser will clear it from memory when it decides it's good and ready.
To clear it from the DOM, you would do something like this:
var badImage = document.querySelector("img#idOfImage");
//or "img[href='nameofimagefile.jpeg']"
//whatever you need to do to get the right element
//then, remove it:
badImage.parentElement.removeChild(badImage);
$('#myDiv').remove();
or
function removeElement(divNum) {
var d = document.getElementById('myDiv');
var olddiv = document.getElementById(divNum);
d.removeChild(olddiv);
}
Would remove it from the DOM however it won't free up any memory, or bandwidth or http requests...so performance wise it won't make much of a difference (not taking rendering into account).
However I believe if the image is removed from the DOM the memory it uses will eventually be managed and removed by the browser (garbage collection).
So in short no I don't think there is a specific way to remove it from memory because that is a browser-level concern..
You can free memory of an img element by assigning the src attribute to a 1x1 pixel before removing it.
const imgElement = document.querySelector(selector);
imgElement.setAttribute('src', '/images/pixel.gif');
imgElement.parentElement.removeChild(imgElement);
I create a new HTML5 Audio() object in Javascript code in my page. I want to place this audio object inside a table cell.
typeof() tells me that Audio() gives me an object, and so .append() on the table cell jquery object does not work.
I'd like to place the object into the page and show its controls so the user can interact with it - is that possible without actually writing the
<audio src...></audio>
HTML ?
The way you do it in jQuery, you use html syntax:
td.append("<audio>");
The angle brackets tell jQuery to create a new element. I'm not sure what method jQuery uses behind the scenes (whether innerHTML or doc.createElement()), but the non-jQuery approach would be:
var audioElement = td.appendChild(document.createElement("audio"));
To use the new Audio() syntax, the non-jQuery code is similar:
var audioElement = td.appendChild(new Audio);
Edit: I just tested, and jQuery seems to have no problem with this in Chrome:
td.append(new Audio());
Here's a jQuery demo: http://jsfiddle.net/gilly3/WRqyM/1
Update: IE9 doesn't seem to work. :-( IE9 just doesn't show up unless the audio has a src. I've updated the jsfiddle.
I have found several sites on Google about this problem and also found a few questions on here, which were apparently answered, but as I've been working on this for the last one or two weeks and just can't seem to get it to work at all, I wanted to revisit this.
I'm working on a demo that uses several video tags (vd1-3) which are then used in several canvas tags (cv1-3).
<video id="vd1" width="480" preload>
<source src="jerryclips/Bild01.webm" type="video/webm" id="vd1webm">
<source src="jerryclips/Bild01.mp4" type="video/mp4" id="vd1mp4">
</video>
<canvas id="cv1" width="160" height="270"></canvas>
I got a working version that uses one video. Now I would like to be able to dynamically change the clips that are playing in my video tags and subsequently in the canvas tags. Changing only one source worked, as far as I remember that was just "vd1.src = '...'", but I want to have at least two video files in there.
Now as you can see here, I tried using id's for the sources (as was suggested in an answered question here on stackoverflow), but I wasn't able to make that work.
We were able to get all the sources with this little bit of code here:
var x = document.getElementById("vd1");
var items = x.getElementsByTagName("source");
for(var i= 0; i < items.length; i++){
alert(items[i].getAttribute('src'));
}
}, false);
But I also failed to use it in order to change my sources. I thought I might be able to use "items[i].src = ..." or use setAttribute, but I can't get anything to work.
I'm still fairly new to all this, so I'm possibly missing something very simple... so if anyone has an idea and could point me into a direction, I would really appreciate it.
Update:
Eventually we came up with this solution which is pretty simple and straightforward
var videoPlaying = vd1.currentSrc;
var ext = videoPlaying.substr(videoPlaying.lastIndexOf("."));
vd1.src = "jerryclips/Bild02"+ext;
I think you're overcomplicating things - there's no need to update multiple sources as any given browser is only ever going to be playing one of your videos. If you're loading new sources with JavaScript you can simply query the currentSrc property of vd1, determine which of the videos is playing and load the new video in that format. At that point I'd simply remove all the source elements and set video.src to the new value.