While using HTML5 audio tag, i am having a problem.
I am using icecast2 server to stream my music.
But the problem is, browser saves the buffer when stream is played. So when the player is paused or the page is refreshed, instead of asking server for the fresh stream, it plays the previously saved buffer only.
As i am playing live stream, i want always fresh stream to be played. What can i do to ensure that??
What i found after browsing is- HTML5 Video: Force abort of buffering
So creating a new audio tag is an option but i am not clear on it and also i dont know if it is a good way.
Probably the most common way to prevent caching of any HTTP resource (text files, images, audio, etc) is to append a meaningless random GET parameter onto the URL. So if your URL is like this:
http://musicserver.com/livestream.mp3
Then you'd do something like this:
http://musicserver.com/livestream.mp3?nocache=12034981237
Where the value of nocache is randomly generated each and every time. Then the browser will treat it as a new unique resource/file.
Related
Is it possible to somehow set a constant parameter of 22010Hz? I want to make a website with a page on which you can record a sound message on a local disk in mp3 format 22010Hz.
Demo: https://www.webrtc-experiment.com/RecordRTC/simple-demos/audio-recording.html
Sample: https://github.com/muaz-khan/RecordRTC/blob/master/simple-demos/audio-recording.html
i tried to change the parameter in RecordRTC.js(https://github.com/muaz-khan/RecordRTC/blob/master/RecordRTC.js)
in lines 2944-4946 and nothing changes.
I was playing around with urls the other day and i was wondering if there is a way to for example substitute the domain name for a video link on page load
in the source code, while having the original link still interpreted by the browser to play the video correctly.
So for example, if i host an .mp4 on my server with following link:
<source src="https://goofy.com/dogs.mp4" type="video/mp4" label="Low" res="360">
and i would like it to appear in the source code as:
<source src="https://snoopy.com/dogs.mp4" type="video/mp4" label="Low" res="360">
but still having the goofy one played in the player, it it possible ?
(maybe with javascript ?)
What i am trying to achieve here doesn't need to be that advanced, when i meant "scrape" i was just thinking about people opening the inspector manually and simply grabbing the link, in my example:
https://goofy.com/dogs.mp4
So i was rather thinking of some simple javascript letter substitution scheme on pageload that would display some random letters instead of "goofy". Maybe something like this:
var chars = {'a':'b','c':'z','i':'e'};
var enc;
var str = "goofy.com";
window.onload = function() {
enc = str.replace(/[abc]/g, m => chars[m]);
alert(enc);
};
but i think it won't work, as the player will end up playing the url with the wrong domain name. An i'm not that good at javascript, so i'm not sure of what i'm doing either... Feel free to correct me or maybe offer some solution ? thanks.
Per your comment reply, you want to obfuscate the source urls for a video file.
No, modifying the urls in the <source/> DOM elements won't do anything for you. A bot is getting the raw html from your site, so if the original source urls are embedded there you're not going to be able to hide anything.
Moving up the stack a bit, look at how Youtube handles structuring their urls. At its core, they have a js library that handles building out the video urls and video player dynamically at run time. While its highly obfuscated, its not a huge amount of work to discover what the actual video urls are and download them if you want. If someone really wants to get your videos, its not much work to either investigate the page with dev tools in the browser.
And going low-level, its arbitrary to run a packet sniffer like Charles proxy with a man in the middle local SSL proxy service (built in) to look at the requests being sent back and forth and to easily track down the source url that are delivering the video.
You could go back 10 years and try using Flash or some other embedded 3rd party plugin to "encrypt" the video stream but that's stupid and self defeating. If I really want your videos, I'll just play them full screen and record them on my computer.
Hopefully that more thoroughly answers your question.
I have the contents of an mp3 file saved as a variable, (this isn't meant to be practical, just for a little project of mine), and I wish to play the contents of this variable as an audio file. This would be a simple task with something like node, but unfortunately I must do this entirely client side.
Please note I can not just save the content of the string as an mp3 file, I need to be able to play it from a variable.
I have looked into this, but from what I have found, it appears that this can not be done. If any of you have a solution, I would appreciate hearing it.
This is not very practical, as you're going to get very high memory footprints within the JS engine and will likely cause unnecessary garbage collection... but it is possible to a base64 encode the MP3 which can then be fed into the src attribute of an <audio> tag.
Because it is unrealistically to provide a base64 encoded MP3 in an answer here I'll provide a Fiddle: https://jsfiddle.net/4t6bg95z/1/
But the gist of the code can be something like:
var audio = document.getElementById('audio');
audio.src = "data:audio/mp3;base64,..."; //This is a base64 encoded string of an MP3 file
window.beep = function() {
audio.play();
}
Obviously, it is much better practice to provide a URL to the audio source instead, as that's the intended usage of the Audio API.
I'm developing a web app that works with video files -- specifically, I have the user 'select' their video file through a form input, I then construct a URL reference to that file, and set the <video> source to that URL. This allows me to work with user supplied content, without having to upload the video -- something that seems unnecessary, and will lead to decreased performance.
Here's my very simple code for now:
// within a change event for a file input
var videoFile = e.currentTarget.files[0];
var fileURL = URL.createObjectURL(videoFile);
var videoNode.src = fileURL;
This works great. The problem: It doesn't allow me to store a reference to this video in between user sessions. I've tried to save the fileURL into a Mongo document, and then later reload that video file... and while this works sometimes, it often breaks... with no clear consistency.
Does anyone have a good solution to storing reference to local files in between user sessions? Do I have to use something like the HTML5 Filesystem API? Localstorage?
I may have missed what you are getting at, but it sounds like you just need a cookie. http://www.w3schools.com/js/js_cookies.asp
You can save whatever file name you want in a simple cookie and then the next time they visit the page you recall the video name they want.
I am looking for a solution just to show in a html page the name of each song when played from a mp3 player.
I just have a .txt file outputted from a software that fetches in real time each song artist and name from the mp3 tag, when a new song is being played, with this format inside (the .txt file is also autoupdated each time, like a log file does):
[DAY-MONTH-YEAR HOUR:MIN:SEC] * Artist - Track
Example:
[24-07-2010 20:17:11] * Song 1
[24-07-2010 20:21:11] * Song 2
[24-07-2010 20:25:18] * Song 3
[24-07-2010 20:29:58] * Song ...
I need to get this data from the .txt file and put it into a html div, showing the new song name when it has been logged into the file until a new song is played.
Pretty simple I think, but I donĀ“t know how to work with this formatted text file (it cannot be changed), instead a typical XML file.
I have founded a script that works with XML (not plain text) and the behavior is other than I expect, because it rotates the messages each 5 seconds, not just when the new song is playing:
http://www.dynamicdrive.com/dynamicindex2/ajaxticker.htm
How can I get the [DAY-MONTH-YEAR HOUR:MIN:SEC] * formatted items in javascript?
How can I update the html div, each time a new item (song) is loaded in the .txt file?
Thanks in advance for your help.
There are several pieces of your architecture missing, which makes it difficult to answer your question.
Where did the javascript page come
from?
What is the connection to the server
that the javascript comes from and
the mp3 player?
Where is the text file, on a server
or updated on the local computer by
the mp3 player?
But, if I make several assumptions you might get on the more correct path.
First, if the mp3 player sends a message to a server, and the server updates the text file (big assumption) then what you can do it to either have the javascript application poll the server on some timed basis, to decide when the song changes, and the server can just return the current song.
Is there is reason the javascript application needs the entire text file?
The other option is to have the server open up a long-term connection, such as comet (http://en.wikipedia.org/wiki/Comet_%28programming%29), and the server can just push the data to the javascript application.
I am not answering your question about how to parse the formatted file, as I don't see yet that that would actually be useful to your problem, but as I mentioned, there are too many unknowns in your question.