It is important to add the id attribute to this element as we'll be using this to select it later on in the javascript.
Inside the button element, we add an image linking to the SVG icon for the play button. Inside the audio-player div we first create a play button. Inside the body, we need to add two tags, a main tag with a class of container and a div inside with the class of audio-player. The HTML is pretty simple, a standard HTML file with a link to the style.css stylesheet and both the wavesurfer.js script and the external script.js. We need four icons, one for play, pause, mute and, unmute.
#WAVESURFER CUSTOM STYLE FREE#
You can use any icons you'd like, but I'd recommend checking out, which has a great collection of free and open-source SVG icons. Grab the latest version of Wavesurfer.js from Unpkg. The overall is structured as follows: index.html style.css script.js assets/ ├─ icons/ │ ├─ play.svg │ ├─ pause.svg │ ├─ volume.svg │ ├─ mute.svg ├─ audio/ │ ├─ sample.mp3 Wavesurfer There is also an assets folder, which will contain a folder for icons and an audio folder for the sample MP3 used in the project. The structure of the app is fairly straightforward, with just three main files, an index.html, style.css and script.js. You can grab a copy and follow along to understand how it all comes together. If you'd like to dive right into the code, it's available on GitHub.
#WAVESURFER CUSTOM STYLE CODE#
The only third-party code required is Wavesurfer.js, which will render the waveform and help when handling the playback control functions. It's built using plain HTML, CSS, and vanilla Javascript. Ps 2: You may email me privately with questions.This tutorial will walk you through the steps required to create a SoundCloud-style audio player with custom audio controls and a live waveform. Sometimes you have to force reload or invalidate objects. Ps: By virtue of Cloudfront being CDN there's a lot of caching. See below how you whitelist CORS headers on Cloudfront. You can also configure CloudFront to forward Access-Control-Request-Headers and Access-Control-Request-Method headers, but it's not required.
Configure CloudFront to forward a whitelist of headers and include the applicable headers in the list of headers to forward, depending on whether you're using Amazon S3 or a custom origin: If you enabled cross-origin resource sharing (CORS) on an Amazon S3 bucket or a custom origin, you can configure CloudFront to respect the CORS settings. while S3 sets the CORS headers, Cloudfront discards them? I'm guessing here. It could be that you haven't configured Cloudfront and so. because you see, Cloudfront makes the request to the object on S3 for you and so picks up some headers and also discards some. Configuring S3 only would work if accessing S3 directly. One gotcha that I can remember is that you have to configure Cloudfront to pass the CORS headers from S3. Like it's been a few months so I might have forgotten some implementation details. I have set this up recently and it's working properly even now.
If you enable CORS on the S3 bucket then Cloudfront (assuming S3 is the origin) will respect that I can confirm that this works. Luckily both S3 and Cloudfront support CORS configuration :-) See AWS S3 Enabling Cross-Origin Resource Sharing for the details. to stop Chrome from blocking the request (or any other browser that exhibits this behaviour) you need to configure your source (i.e S3, Cloudfront) CORS config correctly. Therefore, this is really a problem caused by incorrect or lack of a CORS configuration. Seems audio file also fall into the category of these resources since it is an AJAX request initiated by Wavesurfer. "Cross-domain" AJAX requests are forbidden by default because of their ability to perform advanced requests (POST, PUT, DELETE and other types of HTTP requests, along with specifying custom HTTP headers) that introduce many cross-site scripting security issues. However embedded web fonts and AJAX (XMLHttpRequest) requests have traditionally been limited to accessing the same domain as the parent web page (as per the same-origin security policy). Ī web page may freely embed images, stylesheets, scripts, iframes, videos and some plugin content (such as Adobe Flash) from any other domain. It's not a waversurfer.js issue because browsers block requests to some resources from sources that have not listed the client accessing in the list of clients allowed to access.
0 kommentar(er)
