So im building something but im not allowed to use any external files other than the script.js file itself. I want to play a .mp3 sound in a function but im not sure how to do it without uploading the file into my folder.
You can use javascript to set the audio data src to data:audio/ogg;base64,T2dnUwACAAAAAAAAAAA+... etc.
There's an example here. https://iandevlin.com/html5/data-uri/audio.php
To do this with javascript simply
var audioElement = new Audio();
audioElement.src = "data:audio/ogg;base64,T2dnUwACAAAAAAAAAAA+...";
audioElement.play();
You can encode your mp3 file using base64. Than you can the audio in a string:
var beep = "data:audio/mp3;base64,<paste your base64 here>";
var audio = document.getElementById('audio');
audio.src = beep;
audio.play();
The base64 string can be generate using a shell
cat sound.mp3 | base64
Related
I'm trying to audio visualization.
using this web audio js pizzicato for load files,
and this code for visualization
I want to get the loaded files buffer and input buffer to start() method.
AudioVisualizer.prototype.start = function(buffer) {
this.audioContext.decodeAudioData(buffer, decodeAudioDataSuccess,
decodeAudioDataFailed);
var that = this;
function decodeAudioDataSuccess(decodedBuffer) {
that.sourceBuffer.buffer = decodedBuffer
that.sourceBuffer.start(0);
}
}
How can get the files buffer?
or
How can get sound buffer about current output?
I would like to make a webpage where visitors can save audio streams by clicking on links (not live streams, but links from a radio archive which uses streams), I want to do this without a server backend with pure JavaScript in the browser.
I read somewhere about the JavaScript port of FFMpeg, which can encode and save video / audio in the browser utilizing so called blobs. However download library is huge, as far as I remember 17 MB. In fact I would need only stream copying the audio streams, not a real encoding process.
I usually use similar commands to save a programme:
ffmpeg -i http://stream.example.com/stream_20160518_0630.mp3 -c copy -t 3600 programme.mp3
I wonder, is it possible to compile a subset of FFMpeg into JavaScript which provides only the really needed stream copying?
var audio = new Audio();
var ms = new MediaSource();
var chunks = [];
audio.src = URL.createObjectURL(ms);
ms.addEventListener('sourceopen', function(e) {
var sourceBuffer = ms.addSourceBuffer('audio/mpeg');
var stream;
function pump(stream){
return stream.read().then(data => {
chunks.push(data.value)
sourceBuffer.appendBuffer(data.value);
})
};
sourceBuffer.addEventListener('updateend', () => {
pump(stream);
}, false);
fetch("http://stream001.radio.hu:443/stream/20160606_090000_1.mp3")
.then(res=>pump(stream = res.body.getReader()))
audio.play()
}, false);
// stop the stream when you want and save all chunks that you have
stopBtn.onclick = function(){
var blob = new Blob(chunks)
console.log(blob)
// Create object url, append to link, trigger click to download
// or saveAs(blob, 'stream.mp3') need: https://github.com/eligrey/FileSaver.js
}
I've been trying to load an audio file already encoded in base64 but to no avail. I can load encoded images easily, but I can't do it with audio. The example I found with cordova audio is passing url link to the asset folder, but I tried that and it didn't work.
Is there a way to play an audio file encoded in base64 directly?
I tried cordova-plugin-media but it seems to work only with files and not with base64 code.
Finally I found this solutions:
SOLUTION 1:
var src = "data:audio/mp3;base64," + your_base64_code;
document.write("<audio preload='auto' autoplay><source src='" + src + "' /></audio>");
SOLUTION 2:
1) Convert the base64 code to an audio files, saving it in the cache folder.
You can read this article to do it: How to create an audio file from a mp3 base64 string on the device with Cordova
You can use as target folder: cordova.file.cacheDirectory
For example:
saveBase64AsAudioFile(cordova.file.cacheDirectory, "audiofile.mp3", your_base64_code, "audio/mp3");
2) Use the cordova-plugin-media to play the created file:
setTimeout(function () {
var src = cordova.file.cacheDirectory + "audiofile.mp3";
var media = new Media(src);
media.play();
}, 2000);
Use setTimeout to be sure that the files is already created.
How would I properly put a mp3 file into my javascript program. By this I mean can I just type the name of any mp3 file I have saved on my computer or does it have to be mentioned somewhere else in the code.
var sound1 = new Audio('file1.mp3');
So if I declared the variable "sound" to play file1 do I have to tell the program what file1 is. If so, how would I do so.
You can use file:///, and then use the file path of your mp3 file
var sound1 = new Audio('file:///C:/Users/user/file1.mp3');
Replace
var sound1 = new Audio('file1.mp3');
Whit
var sound1 = new Audio('http://example.com/sub/file.mp3');
While you want the adress to be the adress to you'r mp3 file on your server.
You might write a shorted version of the adress if the file on sub folder like this:
var sound1 = new Audio('/sub/file.mp3');
I have a problem with my little project.
Every time the music player is loading new songs into playlist or you are pressing a song on the list to get it playing, it's using a lot of memory, and it stays high until you shut it down. I think its every time I'm using the filereader API that it uses memory, but I'm also loading ID3 information with the jDataView.js script which I also think is taking a lot of memory.
Do you guys have any suggestion, to load,store and play songs with the FileReader, without taking up memory? I've tried to see if it was possible to clear the fileReader after using, but I couldn't find anything. I've only tested in Chrome.
UPDATE:
I have tested my project,and found out, that its when im trying to load the datastring it takes up memory.
reader.onloadend = function(evt) {
if(typeof(e) != "undefined"){
e.pause();
}
e = new Audio();
e.src = evt.target.result; // evt.target.result call takes the memory
e.setAttribute("type", songs[index]["file"].type);
e.play();
e.addEventListener("ended", function() { LoadAudioFile(index + 1) }, false);
};
Is there another way to load the data into the audio element?
This is not because of FileReader but because you are making the src attribute of audio element a 1.33 * mp3filesize string. So instead of the src attribute being a nice short url pointing to a mp3 resource, it's the whole mp3 file in base64 encoding. It's a wonder your browser didn't crash.
You should not read the file with FileReader at all, but create a blob URL from the file and use that as src.
var url = window.URL || window.webkitURL;
//Src will be like "blob:http%3A//stackoverflow.com/d13eb575-4863-4f86-8727-6400119f4afc"
//A very short string that is pointing to the original resource in hard drive
var src = url.createObjectURL( mp3filereference );
audioElement.src = src;