当我单击名为“front-start-play”的 div 并将 mp3 加载到音频播放器时,我试图找到一种加载 mp3 文件的方法。我不熟悉 data-rel
并且我查看了其他类似的问题,但它们处理代码中已有的 url 链接,因为这将在以下网站上使用10+个不同url的帖子,点击后需要加载到播放中。
HTML:
<div class="front-start-play" data-rel="http://www.jplayer.org/audio/mp3/Miaow-01-Tempered-song.mp3"> Load "Song1" </div>
<div class="audio-player-wrapper">
<div class="mejs__button mejs__group-left">
<div class="rewind-btn">
<button title="Rewind 15 seconds">15</button>
</div>
<div class="playpause-btn">
<button title="Play" class="play" id="ppbtn"></button>
</div>
<div class="forward-btn">
<button title="Forward 15 seconds">15</button>
</div>
</div>
<div class="current-time">00:00</div>
<div class="duration-time">00:00</div>
<div class="mejs__button mobile-mute">
<button class="mobile-mute-btn mobile-mute-off"></button>
</div>
<audio width="100%" height="75px" id="audio-player" src="" type="audio/mp3" controls="controls"></audio>
</div>
JS:
$(".front-start-play").click(function(){
var mp3Url = $(this).data('rel');
$("#audio-player").load();
});
最佳答案
而不是:
$("#audio-player").load();
您需要设置音频源:
$("#audio-player").attr('src', mp3Url);
$(".front-start-play").click(function(){
var mp3Url = $(this).data('rel');
$("#audio-player").attr('src', mp3Url);
});
$(".front-start-play").trigger('click');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="front-start-play" data-rel="http://www.jplayer.org/audio/mp3/Miaow-01-Tempered-song.mp3"> Load "Song1" </div>
<div class="audio-player-wrapper">
<div class="mejs__button mejs__group-left">
<div class="rewind-btn">
<button title="Rewind 15 seconds">15</button>
</div>
<div class="playpause-btn">
<button title="Play" class="play" id="ppbtn"></button>
</div>
<div class="forward-btn">
<button title="Forward 15 seconds">15</button>
</div>
</div>
<div class="current-time">00:00</div>
<div class="duration-time">00:00</div>
<div class="mejs__button mobile-mute">
<button class="mobile-mute-btn mobile-mute-off"></button>
</div>
<audio width="100%" height="75px" id="audio-player" src="" type="audio/mp3" controls="controls"></audio>
</div>
关于javascript - 如何通过单击将 mp3 链接加载到音频播放器中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44475581/