Я пытаюсь создать несколько экземпляров Jplayers, каждый из которых воспроизводит другой аудиофайл из моей базы данных Laravel (таблица, называемая архивами), и я застрял в точке, где код jQuery соответствует коду Laravel.
Пока звуковые проигрыватели играют, но играют один и тот же файл.
также у меня возникают проблемы, когда я перехожу глубже в сайт. ex: с mydomain.com/segments/ аудиоплеер добавляет «сегменты» к URL, а не только к общедоступному каталогу. Я знаю, что подобная проблема может быть решена с помощью URL: актив в Laravel, но я не уверен, как с этим, так как это jquery, который получает файл.
Здесь я пытаюсь создать несколько экземпляров jplayer с помощью laravel Forloop (мне нужно начинать с 2, потому что игрок 1 используется где-то в другом месте). Я смущен тем, как смешивать код Laravel и JQuery.
Это все в моем footer.blade.php
<!--{{{$counter = 2}}}--> @foreach ($archives as $archive) <script> var counter = "{{$counter}}"; var file = "archiveAudio/{{$archive->audioFile}}"; $(document).ready(function(){ $("#jquery_jplayer_"+ counter).jPlayer({ ready: function () { $(this).jPlayer("setMedia", { title: "Hidden", mp3: file, oga: "" }); }, play: function() { // To avoid multiple jPlayers playing together. $(this).jPlayer("pauseOthers"); }, swfPath: "../../js", supplied: "mp3, oga", cssSelectorAncestor: "#jp_container_" + counter, wmode: "window", globalVolume: true, useStateClassSkin: true, autoBlur: false, smoothPlayBar: true, keyEnabled: true }); counter ++; }); </script> @endforeach Домашняя страница Blade View (нужно начинать с # 2 игрока, добавить 1 к ID игрока для каждого создаваемого им игрока)
<div id="latest"> <!-- {{ $count = 2}} --> @foreach ($archives as $archive) <div class="singleLatest"> <img src = "/images/segments/{{$archive->segment->image}}" width="100px;"/> <div class="playerAndInfo"> <h3> {{ $archive->archiveTitle}}<br>{{$archive->segment->name}}</h3> <div id="jquery_jplayer_{{$count}}" class="jp-jplayer"></div> <div id="jp_container_{{$count}}" class="jp-audio" role="application" aria-label="media player"> <div class="jp-type-single"> <div class="jp-gui jp-interface"> <div class="jp-controls"> <button class="jp-play" role="button" tabindex="0">play</button> </div> <div class="jp-progress"> <div class="jp-seek-bar"> <div class="jp-play-bar"></div> </div> </div> <div class="jp-time-holder"> <div class="jp-current-time" role="timer" aria-label="time"> </div> <div class="jp-duration" role="timer" aria-label="duration"> </div> </div> <div class="jp-no-solution"> <span>Update Required</span> To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>. </div> </div> </div> </div> </div><!--end playerAndInfo--> </div> <!-- end single latest --> <!-- {{ $count = $count +1}} --> @endforeach </div><!-- End latest -->
Благодаря!