0

I'm new to coding so sorry for my inexperience. I'm trying to play an audio using the HTML element, but with a few specifics: i don't want the standard HTML control with volume and progression bar, only a Play / Pause button. When i click the button the audio should start, click again and pause, click another time and re-start and so on. My problem is: the audio does not play, probably because I'm doing something wrong linking the source.

So far i got this code, it's a combination of HTML, CSS and Javascript. I know it's a mess but should work (at least, it works with an audio sample i tried). The problem is playing my local audio file; I don't know what's wrong with the source, i tried different combination but nothing. Path and file names are correct. Can you help me?

Also, it would be perfect if i could switch between a Play and Pause icon (from Font Awesome) when i click on the button; so far i only got the Play one, not sure how to add the pause code-wise. But the priority is to get the audio playing.

Thank you!

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


    <style>
    .btn {
      background-color: transparent;
      border: none;
      color: white
      padding: 1px 1px;
      font-size: 52px;
      cursor: pointer;
    }

    </style>

    <audio id="myAudio" preload="auto"> <source src="file:\\\C:\Users\macan\Downloads\howltheme.mp3" type="audio/mpeg">
  <source src="file:\\\C:\Users\macan\Downloads\howlmusic.ogg" type="audio/ogg">
    </audio><script>var myAudio = document.getElementById("myAudio");

   function togglePlay() {
      return myAudio.paused ? myAudio.play() : myAudio.pause();
    };</script>
    <a onClick="togglePlay()"><button class="btn"><i class="fa fa-play-circle" style="font-size:80px;color:black;"></i></button></a>
Sasha
  • 1
  • 1
  • Are there any errors in your browser's Console? Accessing local files can be subject to security restrictions depending on context. Also you probably need to use forward slashes instead of backslashes for the path – ADyson Sep 15 '19 at 17:53
  • Oh and check whether your chosen browser can play ogg files. https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats – ADyson Sep 15 '19 at 17:54
  • @ADyson Thank you for the answers. Indeed i have an error in the Console, i cannot load local files (Chrome:" Not allowed to load local resource"; Firefox: "NotSupportedError: The media resource indicated by the src attribute or assigned media provider object was not suitable."). What other ways i have to play my file? – Sasha Sep 15 '19 at 18:58
  • I found this interesting [solution](https://stackoverflow.com/questions/14074833/using-local-file-for-web-audio-api-in-javascript) but I'm not sure how to merge it with my code. – Sasha Sep 15 '19 at 19:17
  • You could consider installing a simple local webserver to serve both your page and your audio files over HTTP. The browser would then view them as bring remote files. Accesss to local files is deliberately subject to security restrictions to stop malicious developers from trying to read the contents of the user's disk without their knowledge – ADyson Sep 15 '19 at 19:20

0 Answers0