I am in the process of creating a unique audio player for my website utilizing HTML, CSS, and JavaScript. I encountered some challenges while trying to get it to work effectively on Codepen as well as my text editor. The animations were not functioning properly, and I received an error message stating:
Access to script at 'file:///storage/emulated/0/Android/data/com.teejay.trebedit/files/TrebEdit%20user%20files/My%20personal%20website/js/musicplayer.js' from origin 'null' has been blocked by CORS policy: Cross-origin requests are only supported for protocol schemes: http, data, chrome, chrome-untrusted, https.
Below is the code snippet:
HTML:
<div class="audio-player-container">
<audio src="http://www.geocities.ws/azohost/music/indexsong%20(1).wav" preload="metadata" loop></audio>
<p class="audioP">Audio Player</p>
...
CSS:
/* Music player styles */
.audio-player-container {
/* Styles for the audio player container */
...
}
...
JavaScript:
// Objective: Make the music player functional
// Importing lottieWeb library via Skypack
import lottieWeb from 'https://cdn.skypack.dev/lottie-web';
// Assigning variables
const playIconContainer = document.getElementById('../img/btn_play.png');
const audioPlayerContainer = document.getElementByClass('audio-player-container');
...
I obtained this code from a helpful website and made adjustments to suit my preferences: https://css-tricks.com/lets-create-a-custom-audio-player/
Despite trying various solutions, including hosting the JavaScript file on geocities.ws and adding it to the HTML file, I still encountered access control errors. Any assistance would be greatly appreciated.