#WaveSurfe.js doesnt loading

101 messages · Page 1 of 1 (latest)

short river
short river
#

@stoic rover I need u man

#

😦

#

when I write this code in the html.index

stoic rover
#

I have no idea what you are doing, nor why this is an Angular question. Seems like you have a problem with permissioning on your server.

short river
#

no

#

I wanna show wave form of the sound

#

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous"> -->

<title>BeatZoneTr</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="https://www.beatstars.com/assets/img/bs-logos/bs-logo-red.svg" />
<script src="https://unpkg.com/wavesurfer.js"></script>

</head>

<body class="background-index">
<app-root></app-root>

<div style="
margin-top: 2rem;
background-color: #454d55 !important ;
height: 100px;
color: white !important;
text-align:center ;
">
WaveSurfer
<div id="waveform" style="
background-color: #4da6ff !important ;
height: 100px;
"></div>
</div>

<script>
var wavesurfer = WaveSurfer.create({
container: "#waveform",
waveColor: "violet",
progressColor: "purple",
});
wavesurfer.load("../../../assets/audios/cairo.wav");
</script>

</body>

</html>

BeatStars
Buy Beats Online | Download Beats | Rap Beats For Sale | Instrument...

BeatStars is a digital production marketplace that allows music producers to license and sell beats and give away free beats. Recording artists and songwriters can download beats and distribute their beats. worldwide.

#

this workıng but

#

when ı write this code <script src="https://unpkg.com/wavesurfer.js"></script>

<div style="
margin-top: 2rem;
background-color: #454d55 !important ;
height: 100px;
color: white !important;
text-align:center ;
">
WaveSurfer
<div id="waveform" style="
background-color: #4da6ff !important ;
height: 100px;
"></div>
</div>

<script>
var wavesurfer = WaveSurfer.create({
container: "#waveform",
waveColor: "violet",
progressColor: "purple",
});
wavesurfer.load("../../../assets/audios/cairo.wav");
</script>

#

in my player.component.html

#

the code doesnt work

stoic rover
#

g!codeblock

mystic axleBOT
#

@stoic rover, you can use the following snippet to have your code formatted and colored by Discord. Replace ts with the language you need (i.e. html, js, css, etc)
```ts
// your code goes here
```

stoic rover
#

/assets is a root level folder. You never need a relative path like ../assets. Just do /assets because it is a folder at the root of your app.

short river
#

okay

stoic rover
#

And using non-Angular-ized JS is difficult. you likely are going to need to wrap it in Angularisms to make it work.
You cannot add <script> to Angular template.html files. That does not work.

short river
#

It didn't work either when I added the script file to index.html and wrote the rest to component html.

stoic rover
#

What does "it didn't work" mean?

short river
#

no waveform occurred

#

like this

#

so what should ı do

stoic rover
#

look for error messages?

short river
#

ı looked

#

@stoic rover

short river
#

can ı gonna make it with angular

#

?

#

ı just need a answer

#

<@&748787594543759390>

timber raft
# short river <@&748787594543759390>

I can moderate your own content but unlikely what you need: please don't use tags widely like that.
That's Saturday today (small traffic) and you are providing small screenshots with foreign language.
Help yourself if you want some help.

short river
#

So how would you suggest I do this wawe form thing?

timber raft
#

I don't know anything about Wavesurfer but wavesurfer angular on Google Search provides good answers to avoid using native js scripts, as advised by Rob.

#

like a dedicated angular wrapper.

short river
#

ı dont know anythıng about angular wrapper

#

😦

timber raft
#

A wrapper is a solution acting as an adapter between the native solution (wavesurfer) and the solution consuming it (angular).
It makes it easier to use and avoid such a current situation.

#

With previous google search advice you'll find as a first result a dedicated nom library to use in place of js scripts

short river
#

I already download it with npm

#

npm i wavesurfer.js

timber raft
#

I'm giving you advices about using Google search for wavesurfer angular and that's not what you will get

stoic rover
short river
#

if it's not important why is it not working 😢

stoic rover
#

for some other reason

#

likely because, as two people have told you. You need an Angular wrapper to make this work.

short river
#

ok I am gonna search this

stoic rover
short river
#

rob cmn

#

aklsdjalksda

timber raft
short river
#

I just started the software and I've been trying since morning to solve the problem. Thank you very much for your support

#

❤️ ❤️

stoic rover
#

The first thing to learn is when you are using two things you should do a web search for those two things. 🙂

short river
#

ok sir!

short river
stoic rover
#

restart your editor. it may not have noticed the new install. Assuming you did install it

short river
#

same

#

how can ıt be possible

#

ı deleted the angular-wawesurfer-service

#

than ı tried re-upload it

#

now ı got error

stoic rover
#

Version 14 is not Version 11.

short river
#

what

stoic rover
#

Last publish

a year ago

short river
#

so? 😄

#

am ı have to change my angular version?

#

rob?

#

😄

stoic rover
#

You have version 14 of Angular. That library wants v11 of Angular. 11 is not 14.
Last published a year ago means that this package is not very actively maintained.
A lack of a link to a repository means that the package isn't one I would consider for my app

short river
#

okay but I need this package

#

there is no other package that does this job

stoic rover
#

You will likely have to make your own then

short river
#

ı cant

stoic rover
stoic rover
#

You are a developer aren't you?

short river
#

I cannot do everything at once. i have to use this package to save time

stoic rover
#

You are saving time? 🤣

short river
#

not now

#

alkşsjdasdaslk

stoic rover
#

Likely you won't need many changes. Just copy the files from one of the repo into your app

#

But you should read the code and understand what it does and how it works. This is the life of a developer

short river
#

ro

#

whats gonan happen

#

if ı delete my angular version

#

and upload angular 11

#

Is there any chance my project won't open?

stoic rover
#

going backwards generally isn't the best direction IME

short river
#

rob

#

are u here

#

ı thınk ı solve the problem

short river
#

YES I SOLVED