如何使用单个图标按钮在颤振中播放和暂停音频

Question

如何使用单个 IconButton 使用音频播放包在颤振中播放和暂停音频。此外，如果图标我单击单个列表项，它应该只更改一个图标而不是所有列表图标。

如果有人可以建议最好的音频播放器包来播放带有内联音频的列表，那将很有帮助。

import 'dart:convert';
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:gradient_app_bar/gradient_app_bar.dart';
import 'package:http/http.dart' as http;
import 'package:jummamubarak/Screens/HomeScreen.dart';
import 'package:jummamubarak/Screens/ViewTone.dart';
class TonesListScreen extends StatefulWidget {
@override
_TonesListScreenState createState() => _TonesListScreenState();
}
class _TonesListScreenState extends State<TonesListScreen> {
final String data =
"https://api.airtable.com/v0/appZeBnQJQ0OaVoPQ/Ringtones?maxRecords=100000&view=Tones";
List toneTitle;
List toneurl;
ScrollController _controller = new ScrollController();
@override
void initState() {
super.initState();
this.getJsonData();
}
Future<String> getJsonData() async {
var response = await http.get(
Uri.encodeFull(data),
headers: {
HttpHeaders.contentTypeHeader: "application/json",
HttpHeaders.authorizationHeader: "Bearer keyr05is7vPCWxmYM"
},
// headers: {"Accept": "application/json"},
);
print(response.body);
setState(() {
// ignore: non_constant_identifier_names
var ConvertDataToJson = json.decode(response.body);
toneTitle = ConvertDataToJson['records'];
});
setState(() {
// ignore: non_constant_identifier_names
var ConvertDataToJson = json.decode(response.body);
toneurl = ConvertDataToJson['records'];
});
return "Success";
}
Widget _files() {
if (toneTitle == null) {
return SpinKitCircle(
color: Color(0xff34495E),
size: 50.0,
);
} else {
return ListView.builder(
physics: const AlwaysScrollableScrollPhysics(), // new
controller: _controller,
itemCount: toneTitle == null ? 0 : toneTitle.length,
itemBuilder: (BuildContext context, int index) {
return Padding(
padding: const EdgeInsets.only(left: 10.0, right: 10.0, top: 5.0),
child: Card(
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Flexible(
child: Text(
toneTitle.reversed.toList()[index]['fields']['Name'],
style: GoogleFonts.muli(
fontSize: 15.0,
fontWeight: FontWeight.bold,
),
),
),
RadiantGradientMask(
child: IconButton(
icon: Icon(
Icons.play_circle_filled,
color: Colors.white,
size: 40.0,
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ViewTone(
toneTitle: toneTitle.reversed.toList()[index]
['fields']['Name'],
toneUrl: toneurl.reversed.toList()[index]
['fields']['Url'],
),
),
);
},
),
)
],
),
),
),
);
},
);
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: GradientAppBar(
gradient: LinearGradient(
colors: [
Color(0xff14d5a3),
Color(0xff039cc1),
],
),
title: Text(
'Islamic Tones',
style: GoogleFonts.muli(
fontWeight: FontWeight.bold,
),
),
),
body: _files(),
);
}
}
``

Answer 1

您可以在 Flutter 中使用的音频播放器插件是 audioplayer 插件。只需初始化音频播放器即可使用play()、pause()、resume()和stop()等函数。确定何时从头开始播放音频，以及何时在您的用例中调用暂停/恢复。您可以在播放音频时初始化每个计时器。如果"定时器"仍设置为 0，请从头开始播放音频。否则，调用播放/恢复。

AudioPlayer audioPlayer = AudioPlayer();
// Call to play audio from the beginning
_playStart() async {
int result = await audioPlayer.play(url);
if (result == 1) {
// success
}
}
// Call to pause and resume audio
_playPause(bool play) async {
if(play){
await audioPlayer.resume();
} else {
await audioPlayer.pause();
}
}

Answer 2

//在索引的帮助下使用该按钮，然后它就可以正常工作

int? ind;

buildPlayPauseButton(RssEnclosure? enclosure, int index) {
return IconButton(
onPressed: () async {
await player.setUrl(enclosure!.url.toString());
(ind == index) ? player.pause() : player.play();

setState(() {
ind = index;
});
},
icon: (ind == index)
? const Icon(Icons.pause)
: const Icon(Icons.play_arrow),
);
}