Stop one audio player when another is started

I Need Help
1

Is there a way to add this functionality? By default, if I have 6 players on my page and one is playing, starting another does not stop the previous one. I could have all 6 playing at once and do not want it to work like that :slight_smile: thanks

2

I know there is a bric which I have copied below, but 100% worth checking from @Lucas that it is currently working with the latest Blocs and Bootstrap format, and if it is then this will tick all boxes.

But check first !

.
.

Or you can try the below:

just had a very quick play and this works well, I just tried it quickly by adding 2 tracks to the code and they play fine and clicking on the track makes it play in the player.

Obviously needs styling etc…the above bric will be easier but if you want something simple this will work.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MP3 Audio Playlist</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
  /* Custom styles for the audio player */
  .audio-player {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
  }

  /* Style for the playlist */
  .playlist {
    list-style: none;
    padding: 0;
  }

  /* Style for each playlist item */
  .playlist-item {
    margin-bottom: 5px;
  }

  /* Style for the selected playlist item */
  .playlist-item.active {
    font-weight: bold;
  }
</style>
</head>
<body>

<div class="container">
  <h1 class="mt-5 mb-3">MP3 Audio Playlist</h1>
  
  <div class="audio-player">
    <audio controls id="audioPlayer">
      <!-- Add your demo songs here -->
      <source src="demo1.mp3" type="audio/mpeg">
      <source src="demo2.mp3" type="audio/mpeg">
      <!-- Add more <source> elements for additional songs -->
      Your browser does not support the audio element.
    </audio>

    <ul class="playlist">
      <!-- Add your demo songs here -->
      <li class="playlist-item active" data-src="demo1.mp3">Demo Song 1</li>
      <li class="playlist-item" data-src="demo2.mp3">Demo Song 2</li>
      <!-- Add more playlist items for additional songs -->
    </ul>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const audioPlayer = document.getElementById('audioPlayer');
    const playlistItems = document.querySelectorAll('.playlist-item');

    // Function to play selected song
    function playSong(event) {
      const selectedSong = event.target.getAttribute('data-src');
      audioPlayer.src = selectedSong;
      audioPlayer.play();

      // Highlight the selected song in the playlist
      playlistItems.forEach(item => {
        item.classList.remove('active');
      });
      event.target.classList.add('active');
    }

    // Add click event listener to each playlist item
    playlistItems.forEach(item => {
      item.addEventListener('click', playSong);
    });
  });
</script>
</body>
</html>

.
.
.

This is what I knocked up quickly. Click on the track and the song stops and the other plays.

Notification_Center
Notification_Center1216×570 50.9 KB

3

Ha, I actually bought that… I only use when I add a playlist player, lol. I will check out the single players. Thanks for the reminder :slight_smile:

JD

1 Like
4

That’s the entire page markup @AdieJAM, you don’t need most of that. You’re also loading an alpha version of bootstrap again.:grimacing:

1 Like
5

looks like my reply thru email may not have went to right spot here, I do have Lucas audio player, I have a site with 9 single plain Blocs players. That code posted is ok for a playlist. I just want to keep my single players, each with one song each, but I just want any ‘playing’ song to stop when another player is started. That always works with a playlist player, but I know there’s a way to stop one single player when another separate one on the page starts. Just not sure how :slight_smile: You can see the players on my site https://www.thundersoundstudio.ca If you play one, you have to stop it manually to play another or else 2 songs will be playing… :frowning:

6

Aha! I used some of this on an old site for 3 audio recordings from a doctor, worked well and just pasted the same original code in which I got from my friend at chatGPT!

If it is in a long term website I guess would look into it more.

7

True quality there @AdieJAM :joy: hope you didn’t charge them.

You might have trouble loading two different versions of bootstrap.

Indexing will probably get penalised.

What page errors do you get.

8

Yeah, remember this very well they emailed me at 3 o’clock saying they are sending me a WeTransfer of 3 recordings to go live before 4 o’clock, so I literally got the code, uploaded The recordings and linked them under the player and boom it worked. Crazy thing is with the sites that at 5 o’clock whole website was taken down again as visitors could only access up till 5 o’clock with their prepaid ticket!

9

Support for this has been added in Blocs V5.2.4 testing begins tomorrow. :grinning:

2 Likes