Javascript - 使用不同的图像播放和暂停不同的音频文件 [英] Javascript-Playing and pausing different audio files using different images
本文介绍了Javascript - 使用不同的图像播放和暂停不同的音频文件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我试图允许多张图像播放和暂停不同的歌曲,直到现在我已经实现了歌曲,当图像被选中但是当我暂停和尝试恢复,通过点击另一个图像上一个文件恢复不是以下所需的代码是代码
Hi i am trying to allow multiple images to play and pause different songs , till now i have achieved the playing of songs when the image is selected but when i pause and try resume by clicking on another image the previous file is resumed not the desired one below is the code
JavaScript
Javascript
function StartOrStop(audioFile)
{
var audie = document.getElementById("myAudio");
if(!audie.src || audie.src !== audioFile)
audie.src = audioFile;
if(audie.paused == false)
{
audie.pause();
}
else
{
audie.play();
}
}
HTML
<img src="images/play.png" alt="Play Button" width="57" height="50" onclick="StartOrStop('RWY.mp3')">
<img src="images/play.png" alt="Play Button" width="57" height="50" onclick="StartOrStop('EL.mp3')">
<audio controls id="myAudio" ></audio>
任何有关如何解决此问题的建议?
Any Suggestions on how i can fix this problem ?
推荐答案
你不知道为什么这不会工作。我已经修改了你的代码,所以尝试这个
Hi not sure why this wouldn't be working. I've reworked your code slight so try this
function StartOrStop(audioFile)
{
var audie = document.getElementById("myAudio");
//logs to see filenames
console.log("audio src " ,audie.src); //this will output a full url e.g with www.example.com/file.mp3
console.log("file ", audioFile); // this only outputs what you pass in e.g "file.mp3"
//with the www.example.com the if statement below will be false as www.example.com/file.mp3 is not equal to file.mp3. Either change the onclick event of the images to include the full path or edit the if statement to
// if(audie.src.indexOf(audioFile) != -1){
if( audie.src == audioFile){
audie.paused ? audie.play() : audie.pause();
}else{
audie.src = audioFile;
audie.play();
}
}
我已经在本地运行我的机器,它的工作原理如何,你想要它
I've run this locally on my machine and it works how you want it to
这篇关于Javascript - 使用不同的图像播放和暂停不同的音频文件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文