Category Archives: audio

How can I set CORS access for an audio file on my Linux webserver with apache2?

I am trying to create an audio visualization project on codepen. I tried hosting the audio file with OneDrive, but I was receiving CORS restriction errors. Now I have gone a step further and created my own web server (http://publicwebserverdemo.hopto.org) where I have the audio file hosted (http://publicwebserverdemo.hopto.org/publicAudio/audio.mp3). I have tried several sets of instructions across the internet for implementing CORS with the .htaccess file but I haven't had any luck with that. How can I grant CORS access to codepen for the audio file?

I am using Apache (with the whole LAMP package) on Ubuntu Mate 14.04.

Here is a replication of the sample codepen (I grabbed the code for testing CORS from some place on the internet).

Open your web inspector console and notice the CORS notice:

MediaElementAudioSource outputs zeroes due to CORS access restrictions for http://publicwebserverdemo.hopto.org/publicAudio/audio.mp3

Thank you for your help :)

// Create a new instance of an audio object and adjust some of its properties
var audio = new Audio();
audio.src = 'http://publicwebserverdemo.hopto.org/publicAudio/audio.mp3';
audio.controls = true;
audio.loop = true;
audio.autoplay = true;
// Establish all variables that your Analyser will use
var canvas, ctx, source, context, analyser, fbc_array, bars, bar_x, bar_width, bar_height;
// Initialize the MP3 player after the page loads all of its HTML into the window
window.addEventListener("load", initMp3Player, false);
function initMp3Player(){
	document.getElementById('audio_box').appendChild(audio);
	context = new webkitAudioContext(); // AudioContext object instance
	analyser = context.createAnalyser(); // AnalyserNode method
	canvas = document.getElementById('analyser_render');
	ctx = canvas.getContext('2d');
	// Re-route audio playback into the processing graph of the AudioContext
	source = context.createMediaElementSource(audio); 
	source.connect(analyser);
	analyser.connect(context.destination);
	frameLooper();
}
// frameLooper() animates any style of graphics you wish to the audio frequency
// Looping at the default frame rate that the browser provides(approx. 60 FPS)
function frameLooper(){
	window.webkitRequestAnimationFrame(frameLooper);
	fbc_array = new Uint8Array(analyser.frequencyBinCount);
	analyser.getByteFrequencyData(fbc_array);
	ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
	ctx.fillStyle = '#00CCFF'; // Color of the bars
	bars = 100;
	for (var i = 0; i < bars; i++) {
		bar_x = i * 3;
		bar_width = 2;
		bar_height = -(fbc_array[i] / 2);
		//  fillRect( x, y, width, height ) // Explanation of the parameters below
		ctx.fillRect(bar_x, canvas.height, bar_width, bar_height);
	}
}
div#mp3_player{ width:500px; height:60px; background:#000; padding:5px; margin:50px auto; }
div#mp3_player > div > audio{  width:500px; background:#000; float:left;  }
div#mp3_player > canvas{ width:500px; height:30px; background:#002D3C; float:left; }
<div id="mp3_player">
  <div id="audio_box"></div>
  <canvas id="analyser_render"></canvas>
</div>

Wishlist Member playing audio fails

I have a membership site built on WordPress + Wishlist Member. I've setup directory protection to protect all files in it.

When you're a member of the right group, you get access to the files in the protected directory.

When I'm logged in with a test account that has access to this directory, I enter the full path to a file in this directory, in the web browser address bar and the download starts, as expected. When I'm not in the right level, or not logged in, I don't have access, and I'm redirected to the WishList Member Login page. So far so good.

Now when I do have access, I want to be able to do 2 things on the protected page:

  • download an audio file
  • play the audio file with the standard WordPress audio player.

Downloading the file works, but playing the same file does NOT work. The path to the file is the exact same.

This is the .htaccess file content:

# BEGIN WishList Member Folder Protection
Options FollowSymLinks
RewriteEngine on
#RewriteCond %{REQUEST_URI}  ^free/*
RewriteRule ^(.*)$ /index.php?wlmfolder=free&restoffolder=$1 [L]
# END WishList Member Folder Protection

Any idea why downloading (= direct access to the file) does work and why playing the file in the standard WordPress audio player doesn't?

HTML5 Audio element sends 2 times http get request

I have access a audio element with 135KB audio data in a HTML file.(using apache server)

Html code

 <audio id="ring" src="Ring.wav" loop></audio> 

When I access the HTML page, 1 Http Get request with status 206 fired.(Request range: bytes=0-)

My problem is when I tried to play that audio from Js file ,at the time again Get request with status 206 fired.(Request range: bytes=16044-)

js code

 var ring = document.getElementById("ring");
 ring.play();

Please answer my following questions:

  1. Why second time Get request fired.

  2. How to change this multiple Get request to single Get request.

NOTE: I am using firefox 44.0.2.

HTML5 Audio element sends 2 times http get request

I have access a audio element with 135KB audio data in a HTML file.(using apache server)

Html code

 <audio id="ring" src="Ring.wav" loop></audio> 

When I access the HTML page, 1 Http Get request with status 206 fired.(Request range: bytes=0-)

My problem is when I tried to play that audio from Js file ,at the time again Get request with status 206 fired.(Request range: bytes=16044-)

js code

 var ring = document.getElementById("ring");
 ring.play();

Please answer my following questions:

  1. Why second time Get request fired.

  2. How to change this multiple Get request to single Get request.

NOTE: I am using firefox 44.0.2.

Apache Cordova – Media Plugin play/stop button toggle

I am creating a app for android using cordova plugin media. How creating a button to switch the play/stop using the function below?

function playAudio(src) { my_media = new Media(src, onSuccess, onError); my_media.play();}
function pauseAudio() { if (my_media) { my_media.pause();}}
function stopAudio() { if (my_media) { my_media.stop();}}
function onSuccess() { console.log("playAudio():Audio Success");}
function onError(error) { alert('code: ' + error.code + '\n' + 'message: ' + error.message + '\n');}

.aac extension audio files are played on IE

In my local Wordpress running in XAMPP, I noticed that the post with an audio file attached with .aac extension, the audio works fine in Chrome and it does not work in IE11 where I get "Download File". This message "Download File" comes from mediaelementjs because IE does not seem to be supporting audio/aac files with extension .aac.

I read several references in internet where some links suggest IE supports .aac in HTML5 and some suggest it does not.

I added the following in .htaccess and this did not help either. AddType audio/aac .aac AddType audio/mp4 .mp4 .m4a AddType audio/mpeg .mp1 .mp2 .mp3 .mpg .mpeg AddType audio/ogg .oga .ogg AddType audio/wav .wav AddType audio/webm .webm

Anyone of you faced such issue and I would appreciate any help to make it work. Thanks.

Best method to stream sound from microphone to website?

I try to transfer the live soundstream from my microphone to a webpage running on my apache webserver on LAN only, so it is not reachable from internet. My goal is to hear the sound captured from my microphone if i open my page.

My only idea was to download webrtc-sdk from here and call my own computer, so i can hear the sound from the mic. But it does only show the video captured by the camera, i can't hear any sound from the mic. I created a connection between two computers with WebRTC and was able to hear the sound from the mic, so the mic is working.

What is the best method to solve this?

Using .htaccess authentication breaks HTML audio elements in Chrome Android

I'm building a web page that uses HTML5 audio elements on my home server running Windows 10 and Apache. The audio.play() is called by a javascript function when user click an element on the page.

As the page contains material I don't want random people to find I tried to create a .htaccess and .htpasswd file in the index folder. Everything seems to be working great on all desktop browsers. However the sounds stopped loading on Chrome Android once I added the .htaccess file that looks like this:

AuthType Basic
AuthName "Secret Area"
AuthUserFile C:\\WWW\\user\\.htpasswd
Require valid-user

All the sound files are located at sounds/ folder. Other files like images, stylesheets and javascript files work fine even though they're located in subfolders too.

Example of how the audio files appear in the html file:

<audio><source src="sounds/sound1.mp3" type="audio/mpeg"></audio>

Funny thing I noticed: I clicked an element to play it on the phone, nothing happened. I put my phone on the sofa and removed the .htaccess and .htpasswd files from the server. The instant I deleted them I could hear the sound play on my phone. So it seems like it keeps trying to fetch the sound files but is unable to do so.

In a moment of desperation I even tried various methods to exclude the sounds/ folder from being password protected but that didn't help either.

Could someone shed some light on this?

PHP – MP3 proxy for streaming

I am working on an mp3 streaming web application. I am using an external API to get the mp3 url, the problem is that all mp3's are bounded to the IP requesting the file (in this case my server) and it can be streamed/downloaded only by the server, any other IP will result in a 404.

What I am looking for is the best option for my server to act as a relay/proxy between the mp3 and the user wanting to listen to it.

This is somehow a problem for my bandwidth, but I see no alternative.

This is the code I am using, but as it broadcasts at the same time it downloads, the web app can't get the mp3 tags and it somehow broke the web app player.

if (isset($_GET['name']) AND isset($_GET['url'])){
$url = urldecode($_GET['url']);
if ((strpos($url,'xxxxxx') !== false) || (strpos($url,'xxxxxx') !== false)) {
    header('Content-type: application/octet-stream');
    header('Content-Disposition: attachment; filename="' . $_GET['name'] . ' - xxxxxx.mp3"');
readfile(urldecode($_GET['url']));
} 
else {
    header("HTTP/1.0 404 Not Found");
}
}
else {
  header("HTTP/1.0 404 Not Found");
}

thank you for your time.