0

I found This to use but how can i make the id to tally with each music query from the database

var myAudio = document.getElementById("myfile");

function togglePlay() {
  return myAudio.paused ? myAudio.play() : myAudio.pause();
};
<audio id="myfile" src="/musicfile/{{$ebeat->beat}}" preload="auto"></audio>
<a onClick="togglePlay()">{{$ebeat->title}}</a>
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
Temidayo
  • 82
  • 1
  • 9
  • How are the audio files stored in the database? You need to find a method of serving them as valid binary files from the server - which would seem to be the problem you need to fix before writing any JS code. – Rory McCrossan Jun 30 '17 at 15:44
  • The audio files were stored as strings and moved to a folder. The issue I am having is with the audio id. only the first music played even when I I clicked on others.@RoryMcCrossan – Temidayo Jun 30 '17 at 15:59
  • So you have multiple `audio` elements with the same `id`? If so, that's your problem. Could you edit your question to show a HTML sample with how your code is organised with regards to multiple `audio` and `a` elements – Rory McCrossan Jun 30 '17 at 15:59
  • Even when i try to replace the audio with the various unique id of each music file from database {{$ebeat->title}} @RoryMcCrossan – Temidayo Jun 30 '17 at 16:01
  • How are you targeting the audio elements in the `togglePlay()` function? – Rory McCrossan Jun 30 '17 at 16:02
  • Via audio id like this var myAudio = document.getElementById("myfile"); @RoryMcCrossan – Temidayo Jun 30 '17 at 16:12
  • I added an answer for you – Rory McCrossan Jun 30 '17 at 16:16

1 Answers1

0

Given that you're repeating the same pair of elements throughout the DOM it would make more sense to make the code generic. To do that use DOM traversal to get the previous sibling audio element to the clicked a element. To do that you can use the previousSibling from the reference to the clicked element:

function togglePlay(el) {
  var audio = this.previousSibling;
  return audio.paused ? audio.play() : audio.pause();
};

<audio id="myfile" src="/musicfile/{{$ebeat->beat}}" preload="auto"></audio>
<a onClick="togglePlay(this)">{{$ebeat->title}}</a>

Alternatively, as you tagged the question with jQuery, you can use prev(), like this:

$(function() {
  $('a.togglePlay').click(function(e) {
    var audio = $(this).prev()[0];
    return audio.paused ? audio.play() : audio.pause();
  });
});

<audio id="myfile" src="/musicfile/{{$ebeat->beat}}" preload="auto"></audio>
<a href="#" class="togglePlay">{{$ebeat->title}}</a>
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
  • It work but the previous did not stop while the next played they were both playing whereas I want the previous to stop playing onchange @Rory McCrossan – Temidayo Jun 30 '17 at 16:28
  • https://stackoverflow.com/questions/15930328/how-can-i-stop-all-audio-playing-using-jquery – Rory McCrossan Jun 30 '17 at 16:29
  • Thanks @Rory McCrossan but how can I implement this $('audio').each(function(){ this.pause(); // Stop playing this.currentTime = 0; // Reset time }); with my current situation of this $(function() { $('a.togglePlay').click(function(e) { var audio = $(this).prev()[0]; return audio.paused ? audio.play() : audio.pause(); }); }); – Temidayo Jun 30 '17 at 16:41