Good morning,
I have put together a music player using modified examples on SO. My player plays songs fine if the file is located within the website's directory, however I wish to change it so that the source can exist anywhere on the server. I have looked on here for examples of this however the ones I find either don't work or do not apply to my situation.
Currently I have this line:
<audio id="audio-player" src="media/song.mp3" type="audio/mp3" controls="controls"></audio>
which plays the file located within the folder media in the website directory.
What I want is something like this:
<audio id="audio-player" src="C:\song.mp3" type="audio/mp3" controls="controls"></audio>
Currently I am doing it with HTML and JS but am open to any suggestions. All I really care about is that I can make a music player that can play files from any location, regardless of how this is done.
Thanks for your time.
When the url is C:\song.mp3 you tell the user to access THEIR local C drive. you need to create a proxy webpage that accesses files that are not in your local web root (public_html). So you can create a webpage in your local webroot that has the following code :
proxy.php
<?php
header("Content-Type: audio/mp3");
echo file_get_contents("C:\\audio\\" . $_GET["name"] . ".mp3");
?>
If you wanted to access the desired audio file you would go to the url proxy.php?name=song. Like so
<audio id="audio-player" src="proxy.php?name=song" type="audio/mp3" controls="controls"></audio>
You should also prevent any "..\" and possibly "~" so they cant access parent folders.
Browsers cannot access arbitrary files on the server's file system. You can't give a Windows file path on the server.
You need to:
Make the file available over HTTP
Give the URL to that file
Related
I'm not a professional, I'm doing a blind imitation
I created and memorized the m3u8 file
This is what it contains
#EXTM3U
#EXT-X-VERSION:6
#EXT-X-MEDIA-SEQUENCE:0
#EXT-X-TARGETDURATION:3
#EXT-X-PLAYLIST-TYPE:VOD
#EXT-X-ALLOW-CACHE:YES
#EXTINF:3.000,
lo-1.ts
#EXTINF:3.000,
lo-2.ts
However, when I uploaded it to the storage puller and created the link to run it on the web, it didn't work
What should I add and how, for the video to work
This is my link
jsfiddle
<script type='text/javascript' src='https://content.jwplatform.com/libraries/0P4vdmeO.js'></script>
<div id="myElement"></div>
<script>
jwplayer("myElement").setup({
file: "https://okoshiyasu.000webhostapp.com/lo.m3u8",
});
</script>
"I uploaded the .ts file to the same domain and I modified the file like #EXTINF:3.000, lo-1.tsBut the problem remains"
There is something wrong with your file host (maybe in settings?). Instead of giving raw file bytes, it instead gives a text version of the file bytes.
For example, when using Chrome, try to open these links in a new tab:
1) Your host: https://okoshiyasu.000webhostapp.com/lo-1.ts = shows text in tab (wrong result).
2) Github test: https://vcone.github.io/public/demos/Mpeg_TS/lo-1.ts = downloads file (correct result).
Becase the file bytes are downloaded (not written text on page) this mean the HLS player gets the data correctly and can now play the video.
Example playback (where .ts file is served from Github):
https://vcone.github.io/public/demos/Mpeg_TS/VC1_Demo_LO_01.html
Solution:
Find a way to fix these links of your .ts file(s) to auto-download to disk. When that is fixed, then the file is also now playable by HLS players. Maybe you can set file type settings if possible? Right now it acts like you uploaded a web page (or text) instead of binary data (file bytes). Maybe it is not allowed for their free space? Check with 000webhostapp.com Admins or forums.
I am creating browser based video editing tool. I want a user to first download a ~70mb javascript file and store it somewhere on his computer. I want to link that file when my website is opened. How can I achieve that.
EDIT
What i meant is that there are various files like js1.js,js2.js... all sums upto 70mb . So i will offer a zip folder to download and only link js1 or js2 file etc depending on the effects user wish to apply
i am sorry to inform you but i think there is something really wrong with what you are trying to do.
A "solution" would be to just cache the javascript on the user's browser so any subsequent requests parse the cache instead of requesting the resource again from the server.
You should know however that if you are in need to download ~70mb of a javascript file you are doing something wrong. I have a whole web app project that when published the total size is around 60mb, all files required to properly run included, and its a damn big codebase in there.
I find it very hard to believe there is ever a need for a single javascript file to be that big, in any case maybe a simple caching should do the trick
That is actually done automatically. Once you add a <script> tag with a link to a local js file (also stored on the server) the file is loaded automatically.
See HTML <script> src Attribute for more information on that.
You can only reference to js files on the server. Files on the server could look like this:
index.html
somefancyjsfile.js
You can then reference from inside your html file to the js file via the <script> tag.
I'm not sure though if the size is not a bit too much...
I was making a website for a band and then I used the following code
<embed src="matrix.m4a" width="180" height="90" loop="true" autostart="true" hidden="true" />
in the HTML file and the issue that I am facing is that when I load the page locally the music plays fine but when I browse the website through the internet it gives me a option to download the music matrix.m4a file.
Any fixes o this ?
Your server is not aware that the m4a file is in fact a music file, and will send it probably as application/octet-stream, which is basically 'hey, please just download this, don't try and open it yourself.'
Perhaps a bit too advanced, but you could make a php script as follows:
<?php
header('Content-Type: audio/mp4');
readfile('path/to/file.m4a')
?>
Final remark as per: only do this if you really think your users will like it. It is considered bad practice to force music on your users, generally.
I'm trying to make a downloader on my website which starts downloading the selected files but the problem is it is a music file which just opens up in a new window and starts playing it.
The script is (don't worry about the id part it is for the next part):
function downloadsong(id){
var url = ("/music/downloadablesongs/linkin-park/Minutes-to-Midnight/wake.mp3");
window.open(url,'Download')
}
If you can configure the server that hosts the files, you should be able to manipulate the HTTP headers to include a "Content-Disposition" header. This will prompt the user agent (browser) to save the file, rather than allow it to automatically detect/interpret the content.
The basic format is:
Content-Disposition: attachment; filename=$file_name.ext
It depends on the user's browser. Usually, plugins or built-in browser capabilities take over and play it instead of letting the browser download.
What you can do is to have the file carry no extension (ie. remove .mp3). That way, it won't be picked-up by plugins. The down side is additional work for the user, by having to add the extension manually.
Other way is simply use the download attribute. I think is the simplest way.
<a href="/music/downloadablesongs/linkin-park/Minutes-to-Midnight/wake.mp3" download>
See more here.
I'd like to know if with HTML5 and JavaScript - and relative support in later browser versions, plus some server side technology PHP could I manage a dynamic video playlist.
I would like to play video1, video2, video3 (placed in a web server sub directory) and loop. I would like to then add a video (video4) and then system should play video1, video2, video3, video4 (loop).
With PHP I can easy add file video4 in sub directory but I don't know about a playlist loop in HTML5/ECMA/JavaScript.
It it possible and easy to implement?
Thank in advance.
This would be relatively easy to set up.
On the PHP side you would do the detection of what's in your subdirectory and based on that output the HTML so it's all in your page.
You could then start that HTML5 video with JQuery and use a callback to start the next one. If the callback is the final one then you start over again.
Relevant code samples:
In PHP get the files in the subdirectory with:
$dir = '/subdirectory';
$videoFileNames = scandir($dir);
// $videoFilesNames[0-...] is now the file names you can use to create the HTML
In JQuery you can start the video with:
$('#videoId').get(0).play();
Catch the callback with:
$("#videoId").bind("ended", function() {
// ...
});
You can create an xml form that lists all the video sources and set title and such there, then call it in your HTML. If you dont' know how to do this I can send over what mine looks like.