1

I am making a website using only HTML and CSS. I am trying to link to an online mp3 file (that I do not own) so that the mp3 plays in the browser. This simple code does what I want on Firefox and Safari:

    <a href="https://www.allaboutbirds.org/guide/assets/sound/548271.mp3" >

However, instead of playing the mp3, Chrome automatically downloads the mp3 file to my computer. Is there some way I can alter my HTML code (not my browser preferences) to stop this from happening? Thanks.

nibor
  • 13
  • 3
  • Try using a form instead of a link, e.g, `
    `. Untested, but it might work.     – r3mainer Jul 19 '22 at 08:30
  • Thanks much, but Chrome still downloaded the mp3 file :( – nibor Jul 19 '22 at 13:45
  • Ohh I think I misunderstood the question. If you want the browser to provide an audio player interface instead of downloading the file, then go with @Brad's answer. I thought you were having problem with Chrome automatically prefetching the file before the user clicks the link... – r3mainer Jul 19 '22 at 23:05

1 Answers1

1

You can't guarantee that all the browsers will have a built-in in-frame player for the audio file.

The best thing to do in this case is to embed the audio player into a page with the audio element:

<audio src="https://example.com/some-sound.mp3" controls></audio>
Brad
  • 159,648
  • 54
  • 349
  • 530
  • I think you are right in that I will have to use the audio player. I had tried it initially but the default style doesn't look good on my page - this is an art project. So, I am learning to style it. More fun! – nibor Jul 19 '22 at 19:39
  • @nibor You can skip the default styling and implement your player in JavaScript, and then use any controls or styling you want on your page to control it. `const a = new Audio('https://example.com/some-sound.mp3'); a.play();` Just don't forget to call `.play()` on a user interaction, like a click event, or it may be blocked by the browser. – Brad Jul 19 '22 at 22:12
  • Brad! I had not used JavaScript before, but I learned enough to get this working. Now it runs like a charm. Thanks so much. – nibor Jul 21 '22 at 23:23
  • @nibor Awesome, glad you got it working! – Brad Jul 22 '22 at 01:40