1

Hi so I have been developing an audio player app with HTML and JavaScript. I'm trying to embed an audio tag inside of my html file, following the tutorial from here.

And I have followed it till 5:00, and inside the audioPlayer div, it should've shown the audio element we have embedded using the JS. Like this from the video:
enter image description here

But in my case the div tag won't expand. Means the audio tag is not embedded right?
enter image description here

And show an error like the following:
enter image description here

These are my codes:
index.html:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale-1.0">
    <title>Javascript Audio Player</title>
</head>

<body>
    <div class="audioPlayer"></div>
    <script src="../static/common-js/player.js"></script>
</body>

</html>

player.js:

import AudioPlayer from './audioPlayer';

const audioPlayer = new AudioPlayer('./audioPlayer', [
    {url: '../music/rainfall.mp3', name: 'Alleviating Rainfall'},

]);

AudioPlayer.js:

export default class AudioPlayer {
    constructor(selector = '.audioPlayer', audio = []) {
        this.playerElem = document.querySelector(selector);
        this.audio = audio;
        this.currentAudio = null;
        this.createPlayerElements();
    }
}

and here is my file directory:
enter image description here


I just want to know where did I go wrong. Thank you in advance! I'd appreciate every help.
ioalft
  • 91
  • 1
  • 5
  • 1
    The screenshot of the error you have is pretty self explanatory, and I believe that is, in part, why you are having issues. Refer to [this](https://stackoverflow.com/questions/58211880/uncaught-syntaxerror-cannot-use-import-statement-outside-a-module-when-import). – tomerpacific Dec 25 '20 at 18:24
  • have you set width and height? – jithil Dec 25 '20 at 18:25
  • @ioalft: I will help you if no one does. But I need some time. I am a bit occupied with my portfolio project. My interview assignment deadline is approaching. Just give me 1 hour. I will help you in case no body helps :) Stay Blessed – Imran Rafiq Rather Dec 25 '20 at 18:36
  • thanks @ImranRafiqRather good luck for your project! – ioalft Dec 25 '20 at 19:03
  • @ioalft: Getting error while using npm run serve – Imran Rafiq Rather Dec 25 '20 at 19:46

0 Answers0